Как сохранить разрывы строк при получении текста из текстового поля?

Я получаю значение в текстовом поле, когда пользователь нажимает кнопку «Отправить». Затем я беру это значение и помещаю в другое место на странице. Однако, когда я это делаю, он теряет символы новой строки, что делает вывод довольно уродливым.

Вот текстовое поле, к которому я обращаюсь:

<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;

Это свойство заставляет пробелы и символы новой строки в совпадающих элементах обрабатываться так же, как внутри <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>

Пс. Если вы действительно хотите сделать это без использования 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>

Вы можете разделить строки textarea на массив:

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>