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

Question

当用户点击submit时，我正在获取文本区域中的值。然后，我取这个值并将其放在页面的其他地方。然而，当我这样做时，它失去了换行符，使得输出变得非常难看。

下面是我访问的文本区域：

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

下面是访问post并对其进行转录的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);

当输入类似于：

小组时间表： 星期二实习@五楼(晚上八时至十一时) 星期四实习@五楼(晚上八时至十一时) “星期日练习”(晚上九时至凌晨十二时)

产出如下：

团体活动时间表:星期二练习@五楼(晚上八时至十一时)星期四练习@五楼(晚上八时至十一时)星期日练习“(晚上九时至凌晨十二时)

那么有什么方法可以保留断线吗？

Answer 1

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

white-space: pre-wrap;

这一财产导致匹配元素中的空白和换行符被以与<textarea>中相同的方式处理。也就是说，连续的空格不折叠，行在显式换行符处被打断(但如果超过元素的宽度，也会自动包装)。

考虑到到目前为止，这里发布的几个答案都容易受到HTML注入 (例如，因为它们将未转义的用户输入分配给innerHTML)或其他buggy的攻击，让我根据原始代码给出一个如何安全和正确地执行此操作的示例：

​

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。如果您真的想在不使用CSS white-space属性的情况下这样做，另一种解决方案是使用<br>标记显式地替换文本中的任何换行符。棘手的部分是，为了避免引入微妙的bug和潜在的安全漏洞，在进行替换之前，您必须先避开文本中的任何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

​

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 3

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

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

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