JavaScript HTML编码函数实现:浏览器内置法与正则替换法对比

作者:微光

时间:2026-10-23

浏览:110

本文介绍了两种在JavaScript中实现HTML编码的方法。第一种利用浏览器内部转换器,通过动态创建容器标签元素并操作其innerText或textContent属性,具有良好的浏览器兼容性。第二种方法采用正则表达式替换特殊字符,虽非系统内置但需注意效率及特殊标签处理。文中提供了相关代码示例及测试建议,帮助开发者根据实际需求选择合适的编码方案。

文章目录

基于浏览器内部转换器的HTML编码方法

方法一利用浏览器内部的转换器来实现字符串转换。其核心思路是动态创建一个容器标签元素,例如DIV,然后将需要转换的字符串设置为该元素的innerText(IE支持)或textContent(Firefox支持),最后返回该元素的innerHTML,从而得到经过HTML编码转换后的字符串。在显示时,实际上无需再次进行转换,直接将该字符串赋值给div即可正常显示。

  

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


基于正则表达式的HTML编码方法

第二种方法基于正则替换。


该方法通过正则表达式将尖括号(<>)和空格符转换为对应的HTML编码。由于这种方式并非系统内置功能,因此容易出现部分特殊标签未被替换的情况,且执行效率相对较低。


  

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


建议先运行测试代码。经测试发现,第一种方法更为实用且效果良好,值得推荐。


此外,这里还提供了一些编辑器常用的HTML编码函数代码,用户可根据具体需求进行添加。需要提醒的是,代码必须经过充分测试。本站jb51.net站长在发布此信息时,因测试过程繁琐,对代码进行了多次修改。


代码如下:

HTMLEncode函数代码实现function HTMLEncode(text){
text = text.replace(/&/g, "&amp;") ;
text = text.replace(/"/g, "&quot;") ;
text = text.replace(/</g, "&lt;") ;
text = text.replace(/>/g, "&gt;") ;
//text = text.replace(/\ /g,"&nbsp;");
text = text.replace(/\n/g,"<br>");
text = text.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;");
return text;
}

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章