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

时间:2013-04-23 09:04:31

标签: javascript jquery html textarea

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

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

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


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

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

4 个答案:

答案 0 :(得分:40)

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

答案 1 :(得分:13)

你可以这样做:

$('.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>

答案 2 :(得分:2)

这是最简单,最安全的纯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,可能无法在不同的浏览器上生成一致的结果。)

答案 3 :(得分:-2)

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