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

问题描述：

我有<textarea>和<div>（其中<p>里面）。当在该区域中输入文本时，<p>会在keyUp时使用内容进行更新。从textarea复制到div，保留换行符

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

用</p><p>取代双“新线”，这是否也可能？这几乎是一个伟大的工作，但不希望为此，这是一个非常小的项目。

这就是我到目前为止。

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

答

您可以简单地这样做：

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

这将替换所有行的textarea元件切断\n与HTML <br/>标签全部更换，这样就可以保持在换行符你的textarea里面还有<p>标签元素。

简单的演示在这里：

$('.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丸的建议。即使你将不得不在这里仍然使用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>

一直在这种解决方案周围徘徊了一个小时左右，但无法得到它的工作。谢谢一堆！ – Xavio 2013-04-23 09:21:37

很高兴帮助！ – 2013-04-23 09:27:40

@Xavio请注意，如果你的textarea包含带有HTML标签的文本（假定你不想被解释），这将失败。当然，你可以分别用'<'和'>'替换''，但是使用'white-space' CSS规则要干净得多。 – 2013-04-23 09:31:27

答

你可能要添加的CSS规则white-space: pre或white-space: pre-wrap到.box p。这将显示空白。

这可能是最好的答案。 – 2013-08-21 04:43:02

这应该是被接受的答案。换行符是换行符，而不是新的段落，并且使用css代替jQuery始终是首选解决方案。恕我直言... – 2014-01-31 10:56:47

感谢您为我提供的美妙解决方案。 – barsan 2016-11-28 13:05:26

答

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

-1：这只是Palash Mondal的不完整答案（不必要的罗嗦）重复。 – 2013-04-23 09:33:59

...也有同样的安全缺陷。 – 2016-11-04 15:54:11

在这里评论的人我不明白你为什么看到这是坏的。它是有效的，如果它是你所说的重复的话，那么请确保链接是所谓的重复，以便这可以被诚实地标记，而不仅仅基于某些机构的建议或意见。 @RaphaelSchweikert – SeekLoad 2017-03-15 16:19:44

答

这是最简单，最安全的纯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属性，那么在将<br>标签添加到其中之前，您需要首先转义输入中的任何HTML元字符。可能最简单和最安全的方法就是让浏览器为你逃脱，例如，像这样：

$(".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，并且可能不会生成一致的结果不同的浏览器。）

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

相关推荐