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

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

下面是我正在访问的文本区域:

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

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

170707 次浏览
小开 

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 标签..。

小开

这里也有类似的问题

检测文本区域输入中的换行符

检测纹理区域中的断线

你可以试试这个:

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>

小开

这里有一个想法，因为你可能在一个文本框中有多个换行符:

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

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

小开

目标容器应该具有 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>

小开

您可以使用 Javascript 设置 div 的 width，并将 white-space:pre-wrap添加到 p tag，这将在每行的末尾打断文本区内容。

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>

小开
最佳答案

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

white-space: pre-wrap;

此属性 导致匹配元素中的空格和换行与 <textarea>中的处理方式相同。也就是说，连续的空格不会折叠，并且在显式换行处断行(但是如果换行超过元素的宽度，也会自动换行)。

鉴于到目前为止在这里发布的几个答案都易受到 HTML 注入的攻击(例如，因为它们将未转义的用户输入分配给 innerHTML)或者其他 bug，让我举一个例子来说明如何根据你的原始代码安全、正确地做到这一点:

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>

P.如果您确实希望使用 CSS white-space属性执行此 没有操作，另一种解决方案是显式地使用 <br> HTML 标记替换文本中的任何换行符。棘手的部分是，为了避免引入微妙的 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 就可以轻松解决的问题来说，这种情况变得相当复杂。

小开

我想您不希望将文本内容解析为 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>


提交答案