如何在jQuery中对HTML字符串里的JavaScript标签进行编码？

当你用jQuery的$(target).html(html)插入包含<script>的HTML时，浏览器会自动解析并执行脚本。要让这些脚本以文本形式展示，有以下几种实用方法：

方法1：直接使用.text()方法 #

如果不需要保留任何HTML结构，只想把整个字符串当成纯文本展示，直接用text()替代html()即可。这个方法会自动转义所有HTML特殊字符（比如<、>、"），浏览器会把所有内容当成纯文本，不会解析标签或执行脚本：

$(target).text(html);

注意：这个方法会把所有HTML标签都转义，比如示例中的<td>也会变成文本显示，适合不需要渲染HTML结构的场景。

方法2：转义Script标签的特殊字符 #

如果需要保留其他HTML标签的渲染（比如示例中的<td>），只转义<script>和</script>标签，可以手动或通过函数替换特殊字符：

手动转义 #

把字符串里的<替换成<，>替换成>，比如把<script>alert(1);</script>改成<script>alert(1);</script>，再用html()插入：

const escapedHtml = '<td class="datagrid-cell" style="text-align:center;" i18n="&lt;script&gt;alert(1);&lt;/script&gt;"></td>';
$(target).html(escapedHtml);

自定义转义函数 #

如果字符串是动态生成的，写一个函数批量替换Script标签：

function escapeScriptTags(str) {
  return str.replace(/<script>/gi, '&lt;script&gt;')
            .replace(/<\/script>/gi, '&lt;/script&gt;');
}
// 使用示例
const safeHtml = escapeScriptTags(originalHtml);
$(target).html(safeHtml);

这个函数会忽略大小写（比如<SCRIPT>也会被转义），确保所有Script标签都被转义成文本。

方法3：针对属性内的脚本单独处理 #

如果Script标签是在HTML属性里（比如示例中的i18n属性），可以单独转义属性值：

// 创建元素并设置属性
const tdElement = $('<td class="datagrid-cell" style="text-align:center;"></td>');
const scriptContent = '<script>alert(1);</script>';
// 转义属性值里的特殊字符
tdElement.attr('i18n', scriptContent.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
// 插入到目标容器
$(target).append(tdElement);

这样i18n属性里的脚本会以文本形式展示，不会被执行。

内容的提问来源于stack exchange，提问作者Alfredo