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

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 点 - 晚上 11 点） 周四练习 @ 5 楼（晚上 8 点 - 晚上 11 点） 周日练习 @（晚上 9 点 - 上午 12 点）

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

原文由 Ethan Vander Horn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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'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 轻松解决的问题来说，这变得相当复杂。

原文由 Ilmari Karonen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 Javascript 设置 width of 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>

原文由 frnt 发布，翻译遵循 CC BY-SA 3.0 许可协议