JS实现HTML标签转义及反转义的两种方案
本文介绍在前端纯JS环境下对用户输入内容进行HTML转义与反转义的两种实现方式。第一种利用DOM元素的innerHTML与innerText（或textContent）属性相互转换，代码简洁且兼容性好；第二种通过正则表达式手动替换特殊字符。文章提供了核心函数代码及完整测试示例，帮助开发者解决XSS防护或纯文本显示问题。
HTML转义与反转义场景
首先简述一个常见的业务场景：前端页面中，用户通过input输入框录入内容，当输入框失去焦点时，需要将该内容展示在div元素中。
在此过程中可能会遇到一个问题：如果用户输入的内容包含HTML标签，这些标签会在div中被浏览器解析为结构元素，而非纯文本显示。
由于该场景完全在前端执行，不涉及后端处理，因此必须通过JavaScript对用户的输入内容进行转义处理，以防止标签被解析。
这里提供一种简单且有效的转义方案，其核心思路是结合使用innerHTML和innerText（或textContent）属性。
需要注意的是，Firefox浏览器不支持innerText属性，需使用textContent；而早期版本的IE浏览器不支持textContent。为了同时兼容IE和Firefox，代码中需要进行兼容性判断。
原理在于：innerText（或textContent）会获取元素的纯文本内容，忽略HTML节点标签；而innerHTML则会返回包含标签的字符串。
因此，我们可以先将需要转义的原始内容赋值给元素的innerText（或textContent），然后获取该元素的innerHTML属性。此时，innerHTML返回的字符串即为经过转义后的文本内容。
基于DOM属性的转义方案
具体实现代码如下：
function HTMLEncode(html) {
var temp = document.createElement("div");
(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
var output = temp.innerHTML;
temp = null;
return output;
}
var tagText = "<p><b>123&456</b></p>";
console.log(HTMLEncode(tagText));//<p><b>123&456</b></p>
通过测试结果可以看出，原始的HTML标签及特殊字符（如&符）均被正确转义并保存。
同理，反转义的方法则相反：先将转义后的文本赋值给元素的innerHTML，然后通过innerText（或textContent）获取属性值，即可还原为转义前的纯文本内容。
function HTMLDecode(text) {
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
var tagText = "<p><b>123&456</b></p>";
var encodeText = HTMLEncode(tagText);
console.log(encodeText);//<p><b>123&456</b></p>
console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p> 核心函数代码
以下是实现编码与解码的核心函数代码：
function html_encode(str)
{
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/\'/g, "'");
s = s.replace(/\"/g, """);
s = s.replace(/\n/g, "<br/>");
return s;
}
function html_decode(str)
{
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/'/g, "\'");
s = s.replace(/"/g, "\"");
s = s.replace(/<br\/>/g, "\n");
return s;
}
console.log(html_decode('<div>123</div>'));
console.log(html_encode(html_decode('<div>123</div>')));测试实例
接下来是一个完整的测试实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function html_encode(str)
{
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/\'/g, "'");
s = s.replace(/\"/g, """);
s = s.replace(/\n/g, "<br/>");
return s;
}
function html_decode(str)
{
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/'/g, "\'");
s = s.replace(/"/g, "\"");
s = s.replace(/<br\/>/g, "\n");
return s;
}
console.log(html_decode('<div>123</div>'));
console.log(html_encode(html_decode('<div>123</div>')));
</script>
</head>
<body>
</body>
</html>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系：Web前端三件套怎么协作
2026-11-04 15:41:40