JQuery 转义 HTML 以进行预览

【问题标题】：JQuery Escaping HTML for PreviewJQuery 转义 HTML 以进行预览
【发布时间】：2009-05-11 14:59:47
【问题描述】：

我只使用有序列表在 JQuery 中制作了一个非常简单的预览窗口。我担心用户会输入并不小心弄乱页面的代码或执行某种 XSS。如何使用 Javascript 编码特殊字符来处理这种情况？

【问题讨论】：

【解决方案1】：

如果你使用

$(yourselector).text("<h1>Your text String</h1>");

然后 jQuery 将显示包含特殊字符的实际文本。如果你使用

$(yourselector).html("<h1>Your text String</h1>");

然后 HTML 特殊字符将在显示时被解释。

我在这里假设您希望显示用户在列表标签之间输入的文本。

【讨论】：

$(你的 UL 选择器).append('

');将 li 添加到列表和 $("#someid").text($(this).val());然后将文本添加到新的 li。您需要使用一个变量作为 li 的 id。

$(ul selector).append('

').text(...) - 这会起作用还是 append() 返回父元素而不是创建的元素？

append() 返回父级，据我所知，您需要使用这两个语句。我不知道是否有其他人可以建议一种方法在一个声明中完成所有操作。

【解决方案2】：

你也可以.wrap <pre>标签中的元素。

$("#selector").wrap("<pre></pre>");

【讨论】：

这可能不是 XSS 预防的最佳主意，但现在我考虑了一下。有人可以以开始输入并以

 结束，然后在中心注入他们想要的任何代码。转换为 .text() 很可能是最好的解决方案。

【解决方案3】：

如果您想将转义值存储在变量中，而不是将其呈现到页面，您也可以尝试：

$('<div></div>').text(str).html()

【讨论】：