本文提供两种在JavaScript中实现HTML字符串编码与解码的完整方法。第一种利用浏览器内置的DOM转换器,通过创建临时DIV元素分别处理innerText和textContent,确保在IE和Firefox中均能正确工作。第二种方法基于正则表达式手动替换特殊字符,虽非系统内置且效率较低,但提供了另一种实现思路。代码示例完整覆盖编码、解码及测试流程,并附带兼容性说明。
利用DOM转换器实现编码解码
方法一:
利用浏览器内部的转换器来实现字符串的转换。具体做法是动态创建一个容器标签元素(例如DIV),将要转换的字符串赋值给该元素的innerText属性(IE支持)或textContent属性(Firefox支持),随后获取该元素的innerHTML属性,从而得到经过HTML编码转换后的字符串。在显示时,无需再次转换,直接将该字符串赋值给div即可正常显示。
代码如下:
<script type="text/javascript">
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;
}
function HTMLDecode(text)
{
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
var html = "<br>dffdf<p>qqqqq</p>";
var encodeHTML = HTMLEncode(html);
alert("方式一:" + encodeHTML);
var decodeHTML = HTMLDecode(encodeHTML);
alert("方式一:" + decodeHTML);
</script>基于正则表达式的编码解码方案
方法二:
通过正则表达式将尖括号(<>)和空格符转换为对应的HTML编码。由于这种方式并非系统内置,容易出现部分特殊标签未被替换的情况,且执行效率相对较低。
代码如下:
<script type="text/javascript">
function HTMLEncode2(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;
}
function HTMLDecode2(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;
}
var html = "<br>ccccc<p>aaaaa</p>";
var encodeHTML = HTMLEncode2(html);
alert("方式二:" + encodeHTML);
var decodeHTML = HTMLDecode2("方式二:" + encodeHTML);
alert(decodeHTML);
</script>