JavaScript实现HTML编码与解码:兼容IE与Firefox的两种方案

作者:窗边听雨

时间:2026-10-23

浏览:462

本文提供两种在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,"&amp;");
s = s.replace(/</g,"&lt;");
s = s.replace(/>/g,"&gt;");
s = s.replace(/ /g,"&nbsp;");
s = s.replace(/\'/g,"&#39;");
s = s.replace(/\"/g,"&quot;");
return s;
} 
function HTMLDecode2(str)
{ 
var s = "";
if(str.length == 0) return "";
s = str.replace(/&amp;/g,"&");
s = s.replace(/&lt;/g,"<");
s = s.replace(/&gt;/g,">");
s = s.replace(/&nbsp;/g," ");
s = s.replace(/&#39;/g,"\'");
s = s.replace(/&quot;/g,"\"");
return s;
} 
var html = "<br>ccccc<p>aaaaa</p>";
var encodeHTML = HTMLEncode2(html);
alert("方式二:" + encodeHTML);
var decodeHTML = HTMLDecode2("方式二:" + encodeHTML);
alert(decodeHTML);
</script>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章