Question

当用户点击提交时，我在textarea中获取值。然后，我将此值放在页面的其他位置。但是，当我这样做时，它会丢失换行字符，使输出非常难看。

这是我正在访问的textarea：

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

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

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轻易解决的东西来说，这变得相当复杂。

Answer 2

目标容器应具有white-space:pre样式。试试下面。

＆＃13;

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

＆＃13;

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设置div的width并将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>

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

7 个答案: