- c#的转义和反转义
- 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));//<p><b>123&456</b></p>
同理,反转义的方法为先将转义文本赋值给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);//<p><b>123&456</b></p>
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, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/\'/g, "'");
s = s.replace(/\"/g, """);
s = s.replace(/\n/g, "<br/>");
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(/<br\/>/g, "\n");
return s;
}
console.log(html_decode('<div>123</div>'));
console.log(html_encode(html_decode('<div>123</div>')));