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

2ic8powd 于 2021-09-23 发布在 Java

关注(0)|答案(7)|浏览(374)

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

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

当输入类似于：
团体时间表：
星期二五楼练习（晚上8时至11时）
星期四在五楼练习（晚上8时至11时）
周日练习(晚上九时至上午十二时)
输出为：
团体时间表：星期二在五楼练习（晚上8点至11点），星期四在五楼练习（晚上8点至11点），星期日练习（晚上9点至上午12点）
那么有没有办法保留换行符呢？

JavaScript Html

来源：https://stackoverflow.com/questions/68314123/save-the-textarea-value-and-format

7条答案

按热度按时间

ui7jx7zq1#

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

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

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

赞(0）回复(0）举报 2021-09-23

bf1o4zei2#

你可以设置 width 使用javascript和add创建div的 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>

赞(0）回复(0）举报 2021-09-23

rvpgvaaj3#

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

赞(0）回复(0）举报 2021-09-23

f2uvfpb94#

这里也有类似的问题
检测文本输入区域中的换行符
检测文本区域中的换行
您可以尝试以下方法：

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 = '';

var textContent = document.querySelector('textarea').value;

content += textContent;

content += '';

document.getElementById('output').innerHTML = content;

});

This is some text
this is another text

Another text again and again

赞(0）回复(0）举报 2021-09-23

wj8zmpe15#

最简单的解决方案是使用以下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标签。棘手的部分是，为了避免引入微妙的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轻松解决的问题来说，这变得相当复杂。

赞(0）回复(0）举报 2021-09-23

c9x0cxw06#

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

赞(0）回复(0）举报 2021-09-23

mqkwyuun7#

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

赞(0）回复(0）举报 2021-09-23

我来回答

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

7条答案

相关问题

热门标签

最新问答