HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式

一、用浏览器内部转换器实现转换

1.1.用浏览器内部转换器实现html转码

  首先动态创建一个容器标签元素,如DIV,然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持),最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了。

1.2.用浏览器内部转换器实现html解码

  首先动态创建一个容器标签元素,如DIV,然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持),最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。

1.3.具体实现代码

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

测试:

1 var html = "<br>aaaaaa<p>bbbb</p>";
2 var encodeHtml = HtmlUtil.htmlEncode(html);
3 alert("encodeHtml:" + encodeHtml);
4 var decodeHtml = HtmlUtil.htmlDecode(encodeHtml);
5 alert("decodeHtml:" + decodeHtml);

运行结果:

  

 二、用正则表达式进行转换处理

  使用正则表达式也是一种常用的处理方式,实现原理就是使用替换的方式来实现转码和解码,转码时把<>,空格符,&,',""替换成html编码,解码就把html编码替换成对应的字符,实现代码如下:

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

测试代码:

1 var html = "<br>ccccc<p>aaaaa</p>";
2 var encodeHTML = HtmlUtil.htmlEncodeByRegExp(html);
3 alert("用正则表达式进行html转码,encodeHTML:" + encodeHTML);
4 var decodeHTML = HtmlUtil.htmlDecodeByRegExp("用正则表达式进行html解码:" + encodeHTML);
5 alert(decodeHTML);

测试结果:

  

三、封装HtmlUtil工具类

  将两种方式封装HtmlUtil工具类,方便在开发中使用,完整代码如下:

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐