本文介绍在JavaScript中处理HTML特殊字符的两种常用方法。首先解析浏览器内置的DOM API实现HTML编码与解码，利用createElement动态创建元素获取innerHTML或innerText。其次提供基于正则表达式的通用转码与解码方案，涵盖<、>、&等常见符号的替换逻辑，并说明其在防止XSS攻击中的应用。
本文介绍在JavaScript中处理HTML特殊字符的两种常用方法。首先解析浏览器内置的DOM API实现HTML编码与解码，利用createElement动态创建元素获取innerHTML或innerText。其次提供基于正则表达式的通用转码与解码方案，涵盖<、>、&等常见符号的替换逻辑，并说明其在防止XSS攻击中的应用。
HTML字符转义背景与问题
在Web开发中，经常需要将特定字符进行转义处理后才能在界面正确显示。例如字符“&”在HTML源码中需写为“&”，否则浏览器可能无法正确解析或显示。若直接在HTML中书写“&”，界面最终呈现的依然是“&”字符串，而非预期的符号。
因此，必须对输入内容进行适当的转义处理。
针对上述问题，主要有两种解决方案。
<script>
var HtmlUtil = {
/*1.用浏览器内部转换器实现html转码*/
htmlEncode:function (html){
//1.首先动态创建一个容器标签元素，如DIV
var temp = document.createElement ("div");
//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
(temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
//3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
var output = temp.innerHTML;
temp = null;
return output;
},
/*2.用浏览器内部转换器实现html解码*/
htmlDecode:function (text){
//1.首先动态创建一个容器标签元素，如DIV
var temp = document.createElement("div");
//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
temp.innerHTML = text;
//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
},
/*3.用正则表达式实现html转码*/
htmlEncodeByRegExp:function (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,""");
return s;
},
/*4.用正则表达式实现html解码*/
htmlDecodeByRegExp:function (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,"\"");
return s;
}
};
</script> 基于浏览器内置API的解决方案
第一种方法是利用浏览器内置的HTML工具函数，调用方式如HtmlUtil.htmlDecodeByRegExp("&")。
第二种方案则是借助正则表达式进行手动处理。
基于正则表达式的通用方案
具体而言，可以通过正则表达式进行编码转码。
var value = document.getElementById('input').value.trim();
//对用户输入进行转义
value = value.replace(/&/g,"&");
value = value.replace(/</g,"<");
value = value.replace(/>/g,">");
value = value.replace(/ /g," ");
value = value.replace(/"/g,'"');同样地，也可以使用正则表达式进行解码操作。
var value = e.target.innerText;
// value = decodeURIComponent(value);
value = value.replace(/&/g,"&");
value = value.replace(/</g,"<");
value = value.replace(/>/g,">");
value = value.replace(/ /g," ");
value = value.replace(/"/g,"'");此外，其他开发者也提供了相关的补充实现。
在编写HTML内容时，通常需要对特殊字符进行转义，以确保页面正常渲染。
此外，这种转义机制还有助于防范跨站脚本攻击（XSS）。
具体的解决策略如下。
第一种策略是使用正则表达式。
正则转码实现
正则表达式转码的具体实现如下。
var value = document.getElementById('input').value.trim();
//对用户输入进行转义
value = value.replace(/&/g,"&");
value = value.replace(/</g,"<");
value = value.replace(/>/g,">");
value = value.replace(/ /g," ");
value = value.replace(/"/g,'"');正则解码实现
正则表达式解码的具体实现如下。
var value = e.target.innerText;
// value = decodeURIComponent(value);
value = value.replace(/&/g,"&");
value = value.replace(/</g,"<");
value = value.replace(/>/g,">");
value = value.replace(/ /g," ");
value = value.replace(/"/g,"'");由于不同编辑器的编码差异，其核心逻辑实际上是一致的。
主要操作是将“<”替换为“<”，“>”替换为“>”，并将空格替换为“ ”。
以上内容涵盖了HTML字符转义与反转义的主要实现方式，希望能对读者有所帮助。