Question

我有<textarea>和<div>（里面有<p>）。在区域中输入文本时，<p>会根据keyUp上的内容进行更新。

有没有办法从textarea中保留换行符（换行符）并以某种方式让它们像div / p中的换行符一样工作？

用</p><p>替换双“新行”是否可行？这接近于所见即所得，但不希望这样，这是一个非常小的项目。

这是我到目前为止所做的。

$(".box textarea").keyup(function () {
  var value = $(this).val();  
  $('.box p').text(value);
});

Answer 1

您可能希望将CSS规则white-space: pre或white-space: pre-wrap添加到.box p。这将按原样显示空格。

Answer 2

你可以这样做：

$('.box textarea').keyup(function() {
    var value = $(this).val().replace(/\n/g, '<br/>');
    $(".box p").html(value);
});

这将替换\n元素中的所有换行符textarea，并将其全部替换为html <br/>标记，以便您可以在<p>内的textarea中保留换行符1}}标签元素。

简单演示：

$('.box textarea').keyup(function() {
  $(".box p").html(this.value.replace(/\n/g, '<br/>'));
});

textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <textarea></textarea>
  <br/>
  <p></p>
</div>

如果您可以更改css文件，那么您也可以按照 @Explosion Pills 的建议尝试以下解决方案。即使您仍然必须在此处使用jquery代码将textarea输入的文本添加到p事件上的keyup标记，例如：

$('.box textarea').keyup(function() {
  $(".box p").html(this.value);  // replace is not needed here
});

textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
  white-space: pre; // <--- This is the important part
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <textarea></textarea>
  <br/>
  <p></p>
</div>

Answer 3

这是最简单，最安全的纯jQuery解决方案：

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box p').text(value).css('white-space', 'pre-wrap');
});

当然，如果您可以将.box p { white-space: pre-wrap }添加到静态CSS样式中，那么您不需要使用jQuery注入它。

（另请注意，white-space: pre-wrap也会导致多个连续的空格被保留，并且不会折叠到一个空格中。如果您不想这样做，但仍希望保留换行符，请使用white-space: pre-line代替。）

聚苯乙烯。您应该从不将未转义的用户输入传递给.html()（例如当前接受的答案），因为如果输入包含任何HTML元字符，例如&，则会导致输出错误或<，如果输入可能受到恶意攻击者的影响，也可以打开HTML注入和跨站点脚本（XSS）攻击。

如果您绝对坚持不以任何形式使用CSS white-space属性，则需要首先转义输入中的任何HTML元字符，然后再将<br>标记添加到其中。可能最简单和最安全的方法是让浏览器为您处理转义，例如像这样：

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box div.output').text(value).html(function (index, html) {
    return '<p>' + html.replace(/[^\S\n]+\n/g, '\n').replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>') + '</p>';
  });
});

这将首先使用.text()（自动HTML转义）将输入文本复制到目标元素中，然后修改生成的HTML代码以从行中删除尾随空格，将多个连续换行符折叠为段落符号，最后用<br>个标记替换单个换行符。

（注意，为了在输出中允许多个段落，目标元素应该是<div>，而不是<p>元素。将一个<p>元素嵌套在另一个元素中不是有效的HTML，可能无法在不同的浏览器上生成一致的结果。）

Answer 4

使用string.replace("\n", "<br/>")将文字区域中的所有换行符替换为页面中的新行。

JavaScript的：

<script type="text/javascript">
function ta()
{
taValue = document.getElementById("ta").value;
taValue = taValue.replace("\n", "<br/>");
document.getElementById("tatext").innerHTML = taValue;
}
</script>

HTML：

<textarea id="ta" onkeyup="ta()"></textarea>
<div id="tatext"></div>

从textarea复制到div，保留换行符

4 个答案: