Question

我有一个聊天窗口（使用<div>），有时需要获取多行条目。到目前为止，我只是使用\n替换了传入的<br>，并使用.append()显示了该文本。不幸的是，我发现根据用户输入留下一个裸.append()允许用户插入任意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;。其他较旧且不起眼的浏览器也可能不支持此功能。

Answer 2

使用<pre>元素保留纯文本中的换行符（以及其他内容）。

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

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

Answer 3

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

您可以通过替换＆lt;来转义HTML元素。与＆amp; lt;和＆gt;与＆amp; gt;然后用BR标签替换新行。

如何在$ .text（）中获取换行符，或者如何从HTML中保证$ .append（）安全？

3 个答案: