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

Ответ 1

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

Ответ 2

Целевой контейнер должен иметь стиль 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>

Ответ 3

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>

Ответ 4

Вы можете установить width div с помощью Javascript и добавить white-space:pre-wrap в p tag, это сломает ваш контент textarea в конце каждой строки.

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

Ответ 5

Я предполагаю, что вы не хотите, чтобы ваш textarea-контент обрабатывался как 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>

Ответ 6

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

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

Это значение HTML сохранит новую строку. Надеюсь, это поможет.

Ответ 7

Похожие вопросы здесь

обнаружить разрывы строк в текстовом поле

обнаружить разрыв строки в textarea

Вы можете попробовать следующее:

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>