Як зберегти розриви рядків при отриманні тексту з текстового поля?

Я отримую значення в текстовій області, коли користувач натискає надіслати. Потім я приймаю це значення і розміщую його деінде на сторінці. Однак, коли я це роблю, він втрачає символи нового рядка, що робить результат досить потворним.

Ось текстове поле, до якого я отримую доступ:

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required></textarea>

Ось код JavaScript, який здійснює доступ до публікації та її транскрипцію.

var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.append(postText);
var card = document.createElement('div');
card.append(post);
var cardStack = document.getElementById('#card-stack');
cardStack.prepend(card);

Коли вводиться щось на зразок:

Розклад груп:

Тренінг у вівторок @ 5 поверх (20:00 - 23:00)

Тренінг у четвер на 5 поверсі (20:00 - 23:00)

Недільна практика @ (21:00 - 12:00)

Результат:

Груповий графік: тренування вівторка на 5 поверсі (20:00 - 23:00) Тренінг у четвер на 5 поверсі (20:00 - 23:00) Тренування в неділю @ (21:00 - 12:00)

То чи є спосіб зберегти розриви рядків?

Найпростішим рішенням є просто стиль елемента, до якого ви вставляєте текст, за допомогою наступної властивості CSS:

white-space: pre-wrap;

Ця властивість призводить до того, що пробіли та нові рядки в відповідних елементах обробляються так само, як і всередині a <textarea>. Тобто, послідовний пробіл не згортається, а рядки ламаються за явними новими рядками (але вони також обертаються автоматично, якщо вони перевищують ширину елемента).

Враховуючи, що кілька відповідей, розміщених тут до цього часу, були вразливими до введення HTML (наприклад, тому, що вони призначають невмінне введення користувачем innerHTML) або іншим способом помилки, дозвольте мені навести приклад того, як це зробити безпечно та правильно, виходячи з вашого вихідного коду:

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.append(postText);
  var card = document.createElement('div');
  card.append(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.prepend(card);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Зверніть увагу, що, як і ваш оригінальний код, наведений вище фрагмент використовує append()та prepend(). На момент написання статті ці функції досі вважаються експериментальними та не повністю підтримуються усіма браузерами. Якщо ви хочете бути в безпеці та залишатися сумісними зі старими браузерами, ви можете досить легко замінити їх наступним чином:

• element.append(otherElement)можна замінити на element.appendChild(otherElement);
• element.prepend(otherElement)можна замінити на element.insertBefore(otherElement, element.firstChild);
• element.append(stringOfText)можна замінити на element.appendChild(document.createTextNode(stringOfText));
• element.prepend(stringOfText)можна замінити на element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
• як особливий випадок, якщо elementпорожній, обидва element.append(stringOfText)і element.prepend(stringOfText)можна просто замінити на element.textContent = stringOfText.

Ось той самий фрагмент, що і вище, але без використання append()або prepend():

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Ps. Якщо ви дійсно хочете зробити це без використання white-spaceвластивості CSS , альтернативним рішенням буде явна заміна будь-яких символів нового рядка в тексті <br>тегами HTML. Хитра частина полягає в тому, що, щоб уникнути непомітних помилок та потенційних дірок у безпеці, вам слід спочатку уникнути будь-яких метасимволів HTML (як мінімум, &і <) у тексті, перш ніж робити цю заміну.

Напевно, найпростіший і найбезпечніший спосіб зробити це - дозволити браузеру обробляти HTML-екран, що працює за вас, наприклад:

var post = document.createElement('p');
post.textContent = postText;
post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');  // <-- THIS FIXES THE LINE BREAKS
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Зауважте, що, хоча це виправить розриви рядків, це не завадить послідовному пробілу згортати візуатор HTML. Можна (начебто) наслідувати це, замінюючи частину пробілів у тексті нерозривними пробілами, але, чесно кажучи, це стає досить складним для того, що можна тривіально вирішити одним рядком CSS.

Цільовий контейнер повинен мати white-space:preстиль. Спробуйте нижче.

<script>
function copycontent(){
 var content = document.getElementById('ta').value;
 document.getElementById('target').innerText = content;
}
</script>
<textarea id='ta' rows='3'>
  line 1
  line 2
  line 3
</textarea>
<button id='btn' onclick='copycontent();'>
Copy
</button>
<p id='target' style='white-space:pre'>

</p>

function get() {
  var arrayOfRows = document.getElementById("ta").value.split("\n");
  var docfrag = document.createDocumentFragment();
  
  var p = document.getElementById("result");
  while (p.firstChild) {
    p.removeChild(p.firstChild);
  }
  
  arrayOfRows.forEach(function(row, index, array) {
    var span = document.createElement("span");
    span.textContent = row;
    docfrag.appendChild(span);
    if(index < array.length - 1) {
      docfrag.appendChild(document.createElement("br"));
    }
  });

  p.appendChild(docfrag);
}

<textarea id="ta" rows=3></textarea><br>
<button onclick="get()">get</button>
<p id="result"></p>

Ви можете розділити рядки тексту на масив:

var arrayOfRows = postText.value.split("\n");

Потім використовуйте його для створення, можливо, більше тегів p ...

Ось ідея, оскільки у вас у текстовому полі може бути кілька нових рядків:

 var text=document.getElementById('post-text').value.split('\n');
 var html = text.join('<br />');

Це значення HTML збереже новий рядок. Сподіваюся, це допомагає.

Ви можете встановити widthdiv за допомогою Javascript і додати, white-space:pre-wrapщоб p tagце розбило вміст тексту в кінці кожного рядка.

document.querySelector("button").onclick = function gt(){
var card = document.createElement('div');
card.style.width = "160px";
card.style.background = "#eee";
var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.style.whiteSpace = "pre-wrap";
card.append(post);
post.append(postText);
document.body.append(card);
}

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required>
Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea>
<br><br>
<button>Copy!!</button>

Припускаю, ви не хочете, щоб ваш текстовий вміст аналізувався як HTML. У цьому випадку ви можете просто встановити його як відкритий текст, щоб браузер не обробляв його як HTML і не видаляв нові рядки. CSS та попередня обробка не потрібні.

<script>
function copycontent(){
 var content = document.getElementById('ta').value;
 document.getElementById('target').innerText = content;
}
</script>
<textarea id='ta' rows='3'>
  line 1
  line 2
  line 3
</textarea>
<button id='btn' onclick='copycontent();'>
Copy
</button>
<p id='target'></p>

Подібні запитання тут

виявити розриви рядків у текстовій області введення

виявити розрив рядка в текстовому полі -

Ви можете спробувати це:

var submit = document.getElementById('submit');

submit.addEventListener('click', function(){
var textContent = document.querySelector('textarea').value;
  
document.getElementById('output').innerHTML = textContent.replace(/\n/g, '<br/>');
  

});

<textarea cols=30 rows=10 >This is some text
this is another text

Another text again and again</textarea>
<input type='submit' id='submit'>


<p id='output'></p>

document.querySelector('textarea').value;отримає текстовий вміст текстової області та textContent.replace(/\n/g, '<br/>')знайде весь символ нового рядка у вихідному коді /\n/gвмісту та замінить його на розрив рядка html <br/>.

Інший варіант - використовувати <pre> тег html . Див. Демо нижче

var submit = document.getElementById('submit');

submit.addEventListener('click', function(){

  var content = '<pre>';
  
  var textContent = document.querySelector('textarea').value;
  
  content += textContent;
  
  content += '</pre>';

  document.getElementById('output').innerHTML = content;

});

<textarea cols=30 rows=10>This is some text
this is another text

Another text again and again </textarea>
<input type='submit' id='submit'>

<div id='output'> </div>