文章内容
一、用浏览器内部转换器实现转换
1、用浏览器内部转换器实现html转码
首先动态创建一个容器标签元素,如DIV,然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持),最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了
2、用浏览器内部转换器实现html解码
首先动态创建一个容器标签元素,如DIV,然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持),最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了
二、用正则表达式进行转换处理
使用正则表达式也是一种常用的处理方式,实现原理就是使用替换的方式来实现转码和解码,转码时把<>,空格符,&,’,””替换成html编码,解码就把html编码替换成对应的字符
三、工具类封装HtmlUtil
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 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; } }; |