JS实现HTML标签转义及反转义
    http://blog.csdn.net/wangyuheng77/article/details/50315051
    简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示。
    这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析。
    由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义。
    这里提供一个非常简单有效的转义方案,利用了innerHTML和innerText
    注:火狐不支持innerText,需要使用 textContent 属性,而IE早期版本不支持此属性,为了同时兼容IE及火狐,需要进行判断操作.
    因为innerText(textContent)会获取纯文本内容,忽略html节点标签,而innerHTML会显示标签内容,
    所以我们先将需转义的内容赋值给innerText(textContent),再获取它的innerHTML属性,这时获取到的就是转义后文本内容。
    代码如下:
    //HTML转义
    function HTMLEncode(html) {
    var temp = document.createElement(“div”);
    (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
    var output = temp.innerHTML;
    temp = null;
    return output;
    }
    var tagText = “

    123&456

    “;
    console.log(HTMLEncode(tagText));//<p><b>123&456</b></p>
    通过测试结果,可以看到html标签及&符都被转义后保存。
    同理,反转义的方法为先将转义文本赋值给innerHTML,然后通过innerText(textContent)获取转义前的文本内容
    //HTML反转义
    function HTMLDecode(text) {
    var temp = document.createElement(“div”);
    temp.innerHTML = text;
    var output = temp.innerText || temp.textContent;
    temp = null;
    return output;
    }
    var tagText = “

    123&456

    “;
    var encodeText = HTMLEncode(tagText);
    console.log(encodeText);//<p><b>123&456</b></p>
    console.log(HTMLDecode(encodeText)); //

    123&456


    当 HTMLDecode(‘1<’) 时返回了 1< ,而我希望希望 1< ,也就是只转义实体字符,而不是做解析。
    下面是个人适合的转义:
    回目录
    用Javascript进行HTML转义
    http://blog.chinaunix.net/uid-20511797-id-3118652.html
    众所周知页面上的字符内容通常都需要进行HTML转义才能正确显示,尤其对于Input,Textarea提交的内容,更是要进行转义以防止javascript注入攻击。
    通常的HTML转义主要是针对内容中的”<”,”>”,”&”,以及空格、单双引号等。但其实还有很多字符也需要进行转义。具体的可以参考这篇文章。
    回目录
    1、HTML转义
    参考上面的提到的文章,基本上可以确定以下的转义的范围和方式。
    1)对”\””、”&”、”‘“、”<”、”>”、空格(0x20)、0x00到0x20、0x7F-0xFF
    以及0x0100-0x2700的字符进行转义,基本上就覆盖的比较全面了。
    用javascript的正则表达式可以写为:
    this.REGXHTMLENCODE = /“|&|’|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
    2)为保证转义结果对浏览器的无差别,转义编码为实体编号,而不用实体名称。
    3)空格(0x20)通常转义为“ ”也就是“ ”。
    转义的代码非常简单:
    this.encodeHtml = function(s){
    return (typeof s != “string”) ? s :
    s.replace(this.REGXHTMLENCODE,
    function($0){
    var c = $0.charCodeAt(0), r = [“&#”];
    c = (c == 0x20) ? 0xA0 : c;
    r.push(c); r.push(“;”);
    return r.join(“”);
    });
    };
    回目录
    2、反转义
    既然有转义,自然需要反转义。
    1) 对“&#num;”实体编号的转义,直接提取编号然后fromCharCode就可以得到字符。
    2) 对于诸如“<”,需要建立一张如下的表来查询。
    this.HTMLDECODE = {
    “<” : “<”,
    “>” : “>”,
    “&” : “&”,
    “ ”: “ “,
    “"”: “\””,
    “©”: “©”
    // Add more
    };
    由此我们可以有反转义的正则表达式:
    this.REGXHTML_DECODE = /&\w+;|&#(\d+);/g;
    反转的代码也很简单,如下:
    this.decodeHtml = function(s){
    return (typeof s != “string”) ? s :
    s.replace(this.REGX_HTML_DECODE,
    function($0,$1){
    var c = this.HTML_ENCODE[$0]; // 尝试查表
    if(c === undefined){
    // Maybe is Entity Number
    if(!isNaN($1)){
    c = String.fromCharCode(($1 == 160) ? 32 : $1);
    }else{
    // Not Entity Number
    c = $0;
    }
    }
    return c;
    });
    };
    回目录
    3、一个有意思的认识
    其实在用正则表达式转义之前,我一直都是用遍历整个字符串,逐个比较字符的方式。直到有一天,看到一篇文章说,javascript正则表达式是C实现的,比自己用javascript遍历字符要快,于是我就试着改写成上面这种方式。虽然代码看起来的确显得神秘而又牛叉,但遗憾的是,在我的Chrome 11 (FreeBSD 64 9.0)上,遍历字符转义/反转的方式要比上面正则表达式的代码快2到3倍(字符串长度越长越明显)。其实,想想也能明白为什么。
    回目录
    4、完整版本的代码
    $package(“js.lang”); // 没有包管理时,也可简单写成 js = {lang:{}};
    js.lang.String = function(){
    this.REGX_HTML_ENCODE = /“|&|’|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
    this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
    this.REGX_TRIM = /(^\s)|(\s$)/g;
    this.HTML_DECODE = {
    “<” : “<”,
    “>” : “>”,
    “&” : “&”,
    “ ”: “ “,
    “"”: “\””,
    “©”: “”
    // Add more
    };
    this.encodeHtml = function(s){
    s = (s != undefined) ? s : this.toString();
    return (typeof s != “string”) ? s :
    s.replace(this.REGX_HTML_ENCODE,
    function($0){
    var c = $0.charCodeAt(0), r = [“&#”];
    c = (c == 0x20) ? 0xA0 : c;
    r.push(c); r.push(“;”);
    return r.join(“”);
    });
    };
    this.decodeHtml = function(s){
    var HTML_DECODE = this.HTML_DECODE;
    s = (s != undefined) ? s : this.toString();
    return (typeof s != “string”) ? s :
    s.replace(this.REGX_HTML_DECODE,
    function($0, $1){
    var c = HTML_DECODE[$0];
    if(c == undefined){
    // Maybe is Entity Number
    if(!isNaN($1)){
    c = String.fromCharCode(($1 == 160) ? 32:$1);
    }else{
    c = $0;
    }
    }
    return c;
    });
    };
    this.trim = function(s){
    s = (s != undefined) ? s : this.toString();
    return (typeof s != “string”) ? s :
    s.replace(this.REGX_TRIM, “”);
    };
    this.hashCode = function(){
    var hash = this.__hash
    , _char;
    if(hash == undefined || hash == 0){
    hash = 0;
    for (var i = 0, len=this.length; i < len; i++) {
    _char = this.charCodeAt(i);
    hash = 31*hash + _char;
    hash = hash & hash; // Convert to 32bit integer
    }
    hash = hash & 0x7fffffff;
    }
    this.__hash
    = hash;
    return this.__hash
    ;
    };
    };
    js.lang.String.call(js.lang.String);
    在实际的使用中可以有两种方式:
    1)使用js.lang.String.encodeHtml(s)和js.lang.String.decodeHtml(s)。
    2)还可以直接扩展String的prototype
    js.lang.String.call(String.prototype);
    // 那么
    var str = “&’\”中国abc def”;
    var ec_str = str.encodeHtml();
    document.write(ec_str);
    document.write(““); // CU的博客在线编辑有bug,
    放不上来!!!
    var dc_str = ec_str.decodeHtml();
    document.write(dc_str);
    回目录
    其他
    function html_encode(str)
    {
    var s = “”;
    if (str.length == 0) return “”;
    s = str.replace(/&/g, “&”);
    s = s.replace(/ s = s.replace(/>/g, “>”);
    s = s.replace(/ /g, “ ”);
    s = s.replace(/\’/g, “'”);
    s = s.replace(/\”/g, “"”);
    s = s.replace(/\n/g, “
    “);
    return s;
    }
    function html_decode(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, “\””);
    s = s.replace(//g, “\n”);
    return s;
    }
    console.log(html_decode(‘<div>123</div>’));
    console.log(html_encode(html_decode(‘<div>123</div>’)));
    回目录
    【转义字符】HTML 字符实体< &gt: &等
    http://www.cnblogs.com/LiuLiangXuan/p/5212155.html
    在开发中遇到javascript从后台获取的url 会被转义,如:http://localhost:8080/Home/Index?a=14&b=15&c=123,想把它转成http://localhost:8080/Home/Index?a=14&b=15&c=123
    网上找了半天的解决方案:
    转义分为escapeHTML和unescapeHTML,先看两个函数的实现。
    js代码:
    /
    @function escapeHTML 转义html脚本 < > & “ ‘
    @param a -
    字符串
    /
    escapeHTML: function(a){
    a = “” + a;
    return a.replace(/&/g, “&”).replace(//g, “>”).replace(/“/g, “"”).replace(/‘/g, “'”);;
    },
    /

    @function unescapeHTML 还原html脚本 < > & “ ‘
    @param a -
    字符串
    /
    unescapeHTML: function(a){
    a = “” + a;
    return a.replace(/</g, “<”).replace(/>/g, “>”).replace(/&/g, “&”).replace(/"/g, ‘“‘).replace(/'/g, “‘“);
    },
    1,escapeHTML将< > & “ ‘转成字符实体
    使用场景:
    (1)用户在页面中录入(比如输入框) , js将该内容提交给后端保存
    (2)显示时,后端将字符串返回前端;js接收到之后:
    a, 使用escapeHTML,将字符串转为 此时,浏览器将能正确解析,因为浏览器接收到实体字符后,转成对应的尖括号等。
    b, 不使用escapeHTML,浏览器一看到<,便认为是html标签的开始,直接把刚才的字符串当脚本执行了,这就是xss漏洞。
    2,unescapeHTML将字符实体转成< > & “ ‘
    使用场景:
    后端将已经转义后的内容显示到页面;比如
    js收到后:
    a,前端进行unescapeHTML,则可以直接dom操作,将标签显示到页面。
    b,前端没有unescapeHTML,则原样输出,但此时并没有执行。
    转义字符:
    提示:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。
    https://www.cnblogs.com/daysme/p/7100553.html