从文本区域获取文本时如何保留换行符？

Question

当用户点击提交时，我在文本区域中获取值。然后我把这个值放在页面的其他地方。但是，当我这样做时，它会丢失换行符，使输出非常难看。

这是我正在访问的文本区域：

<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 楼（晚上 8 点 - 晚上 11 点）

星期四练习 @ 5 楼（晚上 8 点 - 晚上 11 点）

周日练习@（晚上 9 点 - 凌晨 12 点）

输出是：

小组日程：周二练习@5楼（8 pm - 11 pm）周四练习@5th（8 pm - 11 pm）周日练习@（9 pm - 12 am）

那么有没有办法保留换行符？

Answer 1

最简单的解决方案是使用以下 CSS 属性简单地设置要插入文本的元素的样式：

white-space: pre-wrap;

This property 导致匹配元素中的空格和换行符以与<textarea> 相同的方式处理。也就是说，连续的空格不会折叠，并且在显式换行处换行（但如果超出元素的宽度，也会自动换行）。

鉴于到目前为止发布的几个答案都容易受到HTML injection 的攻击（例如，因为他们将未转义的用户输入分配给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>

---

请注意，与您的原始代码一样，上面的 sn-p 使用 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。

这里的 sn-p 与上面相同，但没有使用 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>

---

附言。如果您真的想不使用 使用 CSS white-space 属性，另一种解决方案是用<br> HTML 标记显式替换文本中的任何换行符。棘手的部分是，为了避免引入细微的错误和潜在的安全漏洞，您必须首先在 before 文本中转义任何 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 轻松解决的问题来说，这变得相当复杂。

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

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

您可以将 textarea 行拆分为数组：

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

然后用它来生成，也许，更多的p标签……

Answer 4

这是一个想法，因为您可能在文本框中有多个换行符：

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

此 HTML 值将保留换行符。希望这会有所帮助。

Answer 5

您可以使用 Javascript 设置 width 的 div 并将 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'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>

Answer 6

我想您不希望您的 textarea-content 被解析为 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>

Answer 7

类似的问题在这里

detect line breaks in a text area input

detect line break in 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>

document.querySelector('textarea').value; 将获取文本内容 textarea 和textContent.replace(/\n/g, '<br/>') 会在内容中找到源代码/\n/g 中的所有换行符，并将其替换为html 换行符<br/>。

---

另一种选择是使用 html <pre> 标记。 请看下面的演示

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>