字符串转义和反转义

• c#的转义和反转义

1. System.Text.RegularExpressions.Regex.Unescape(s)  

      2.System.Text.RegularExpressions.Regex.Escape(s)  

---

• js的转义与反转义

1. 一些特殊字符在输出出来无法正确显示 

 解决方案：  在 中使用反斜杠来向文本字符串添加特殊字符。

var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
We are the so-called "Vikings" from the north.

document.write ("You \& me are singing!") 
You & me are singing!

下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中 

 

2.hmtl标签

简单说一下业务场景，前台用户通过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 = "<p><b>123&456</b></p>";
console.log(HTMLEncode(tagText));//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;

 同理，反转义的方法为先将转义文本赋值给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 = "<p><b>123&456</b></p>";
var encodeText = HTMLEncode(tagText);
console.log(encodeText);//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;
console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>

3.html转义

参考上面的提到的文章，基本上可以确定以下的转义的范围和方式。

1）对”\””、”&”、”‘“、”<”、”>”、空格(0x20)、0x00到0x20、0x7F-0xFF
以及0x0100-0x2700的字符进行转义，基本上就覆盖的比较全面了。

用javascript的正则表达式可以写为：

this.REGX_HTML_ENCODE = /“|&|’|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;

2）为保证转义结果对浏览器的无差别，转义编码为实体编号，而不用实体名称。

3）空格(0x20)通常转义为“ ”也就是“ ”。

转义的代码非常简单：

 this.encodeHtml = function(s){
          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){
          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;
                        });
      };

其他

function html_encode(str) 
    { 
        var s = ""; 
        if (str.length == 0) return ""; 
        s = str.replace(/&/g, "&"); 
        s = s.replace(/</g, "&lt;"); 
        s = s.replace(/>/g, "&gt;"); 
        s = s.replace(/ /g, "&nbsp;"); 
        s = s.replace(/\'/g, "&#39;"); 
        s = s.replace(/\"/g, "&quot;"); 
            s = s.replace(/\n/g, "<br/>"); 
        return s; 
    } 

    function html_decode(str) 
    { 
        var s = ""; 
        if (str.length == 0) return ""; 
        s = str.replace(/&amp;/g, "&"); 
        s = s.replace(/&lt;/g, "<"); 
        s = s.replace(/&gt;/g, ">"); 
        s = s.replace(/&nbsp;/g, " "); 
        s = s.replace(/&#39;/g, "\'"); 
        s = s.replace(/&quot;/g, "\""); 
        s = s.replace(/<br\/>/g, "\n"); 
        return s; 
    } 



    console.log(html_decode('&lt;div&gt;123&lt;/div&gt;')); 
    console.log(html_encode(html_decode('&lt;div&gt;123&lt;/div&gt;')));