Js中如何进行HTMLEncode?

html-css07

Js中如何进行HTMLEncode?,第1张

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解码的字符串了。

var HtmlUtil = {

/*1.用正则表达式实现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

},

/*2.用正则表达式实现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

}

}

以上列出的一些实体比较容易记忆,但有一些不容易记住的您可以查看 whatwg 或使用 解码工具 。

HTML 实体是一段以连字符号( &)开头、以分号( )结尾的字符串。用以显示不可见字符及保留字符(如 HTML 标签)

在前端,一般为了避免 XSS 攻击,会将 <> 编码为 < 与 >,这些就是 HTML 实体编码。

在 HTML 转义时,仅仅只需要对六个字符进行编码: &、 <、 >、 " 、 ' 和 `。我们可以使用 he 库进行编码及转义。