如何将换行符放入$ .text（），或者如何使$ .append（）不受HTML的影响？

Question

我有一个聊天窗口（使用<div> ），有时需要获取多行条目。 到目前为止，我只用<br>替换了\\n并用.append()显示了文本。 不幸的是，我发现基于用户输入保留一个裸露的.append()允许用户插入任意HTML，然后浏览器将执行该HTML。 在将随机StackOverflow页面复制到其中（以测试大型发送）并在其中发现<link>标记时发现了这一点，该标记立即导致浏览器尝试下载CSS文件。

更改此方法以使用.text()解决该特定问题，但是现在我无法显示换行符。 <br>是以文本形式而不是HTML形式出现的， \\n似乎没有任何作用。

有什么建议么？ 我应该使用.append()但找到某种方法来转义除<br>之外的所有HTML标记吗？ 还是有办法将换行符插入.text() ？ 还是我完全想不到的第三种选择？

Answer 1

只要您转义HTML中可能特殊的其他字符，就可以使用html()和<br> 。 例如。

function encodeHTML(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

$('#something').append(encodeHTML(userinput).replace(/\n/g, '<br>'));

您也可以考虑将\\n\\n转换为段落分隔符。

另一种方法是继续使用text()但设置一个white-space: pre-wrap样式以将\\n字符保留为换行符

由于版本8之前的IE不支持此功能，因此您需要使用后备样式来设置white-space: pre; word-wrap: break-word; white-space: pre; word-wrap: break-word; 该浏览器。 其他较旧且晦涩的浏览器也可能不支持此功能。

Answer 2

使用<pre>元素以纯文本格式保留换行符（除其他外）。

http://www.codetoad.com/html/text/pre_tag.asp

如果要插入html标签，则应使用$.html() ，而不要使用$.text() 。

Answer 3

如果希望他们能够聊天HTML（作为文本）：

您可以先将<替换为＆lt;来转义HTML元素。 和>与＆gt; 然后用BR标签替换新行。