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

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

当输入是这样的:

Group Schedule:

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

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

Sunday practice @ (9 pm - 12 am)

输出是:

Group Schedule: Tuesday practice @ 5th floor (8 pm - 11 pm) Thursday practice @ 5th floor (8 pm - 11 pm) Sunday practice @ (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>

---

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

---

附言。如果您真的想不使用 CSS 来做到这一点 white-space属性，另一种解决方案是将文本中的任何换行符显式替换为 <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 轻松解决的事情来说，这变得相当复杂。