在表单提交的数据中如果含有html代码片段，为了保证数据入库的安全性，需要对提交的内容做一下html转义，下面就来说说利用JS代码进行HTML代码的转义与反转义的方法。

JS 实现HTML转义与反转义的方法

例1：js对html进行转义

示例代码：

var html = <p>feiniaomy.com</p><span>飞鸟慕鱼博客</span>;

//定义一个HTML转义函数 function htmlEncodeByRegExp (str){ var temp = ""; if(str.length == 0) return ""; temp = str.replace(/&/g,"&amp;"); temp = temp.replace(/</g,"&lt;"); temp = temp.replace(/>/g,"&gt;"); temp = temp.replace(/\s/g,"&nbsp;"); temp = temp.replace(/\/g,"&#39;"); temp = temp.replace(/\"/g,"&quot;"); return temp; } console.log(htmlEncodeByRegExp(html)); // &lt;p&gt;feiniaomy.com&lt;/p&gt;&lt;span&gt;飞鸟慕鱼博客&lt;/span&gt;;复制

例2：js对html代码进行反转义

示例代码：

var html = &lt;p&gt;feiniaomy.com&lt;/p&gt;&lt;span&gt;飞鸟慕鱼博客&lt;/span&gt;; //JS 对html进行反转义 function htmlDecodeByRegExp (str){ var temp = ""; if(str.length == 0) return ""; temp = str.replace(/&amp;/g,"&"); temp = temp.replace(/&lt;/g,"<"); temp = temp.replace(/&gt;/g,">"); temp = temp.replace(/&nbsp;/g," "); temp = temp.replace(/&#39;/g,"\"); temp = temp.replace(/&quot;/g,"\""); return temp; } console.log(htmlDecodeByRegExp(html)); //<p>feiniaomy.com</p><span>飞鸟慕鱼博客</span>;复制

例3：js利用正规对html进行反转义

示例代码：

var html = &lt;p&gt;feiniaomy.com&lt;/p&gt;&lt;span&gt;飞鸟慕鱼博客&lt;/span&gt;; function escape2Html (str) { var arrEntities={lt:<,gt:>,nbsp:,amp:&,quot:"}; return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];}); } console.log(escape2Html(html)); //<p>feiniaomy.com</p><span>飞鸟慕鱼博客</span>;复制

例4：js利用正规对html进行转义

示例代码：

var html = <p>feiniaomy.com</p><span>飞鸟慕鱼博客</span>; function html2Escape(sHtml) { return sHtml.replace(/[<>&"]/g,function(c){return {<:&lt;,>:&gt;,&:&amp;,":&quot;}[c];}); } console.log(html2Escape(html)); //&lt;p&gt;feiniaomy.com&lt;/p&gt;&lt;span&gt;飞鸟慕鱼博客&lt;/span&gt;复制

分享到：