在表单提交的数据中如果含有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;