“`
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<style type="text/css">
#textarea {
width: 500px;
height: 500px;
margin: 0 auto;
}
</style>
<textarea id="textarea">
</textarea>
<!-- <script type="text/javascript"> alert("我是javascript代码!");</script> -->
<button id="re">转义</button> <button id="re2">反转义</button>
<h4>转义</h4>
<p id="show"></p>
<h4>反转义</h4>
<p id="show2"></p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
(function(w){
function Demo() {
var _this = this;
_this.init = function() {
_this.bindEvent();
};
_this.bindEvent = function() {
$("#re").click(function() {
var str = $("#textarea").val();
str = _this.unhtml(str);
$("#show").text(str); //要注意这里都是text方法哈。
});
$("#re2").click(function() {
var str = $("#textarea").val();
str = _this.html(str); //这个html方法是这个对象的。不是jq的html方法
$("#show2").text(str); //要注意这里都是text方法哈。
//假设后台返回过来的数据时经过转义的
//<script type="text/javascript"> alert("我是javascript代码!");</script>
//前端显示直接 用jq的html方法显示到页面上就行了。不要用text方法,也不需要自己转义哈。切记!切记!
});
};
};
Demo.prototype = {
_this: this,
/**
* 将str中的html符号转义,将转义“',&,<,",>”五个字符
* @method unhtml
* @param { String } str 需要转义的字符串
* @return { String } 转义后的字符串
* @example
* ```javascript
* var html = '<body>&</body>';
*
* //output: <body>&</body>
* console.log( UE.utils.unhtml( html ) );
*
* ```
*/
unhtml:function (str, reg) {
return str ? str.replace(reg || /[&<">'](?:(amp|lt|quot|gt|#39|nbsp|#\d+);)?/g, function (a, b) {
if (b) {
return a;
} else {
return {
'<':'<',
'&':'&',
'"':'"',
'>':'>',
"'":'''
}[a]
}
}) : '';
},
/**
* 将str中的转义字符还原成html字符
* @see UE.utils.unhtml(String);
* @method html
* @param { String } str 需要逆转义的字符串
* @return { String } 逆转义后的字符串
* @example
* ```javascript
*
* var str = '<body>&</body>';
*
* //output: <body>&</body>
* console.log( UE.utils.html( str ) );
*
* ```
*/
html:function (str) {
return str ? str.replace(/&((g|l|quo)t|amp|#39|nbsp);/g, function (m) {
return {
'<':'<',
'&':'&',
'"':'"',
'>':'>',
''':"'",
' ':' '
}[m]
}) : '';
}
}
w.Demo = Demo;
})(window)
var demo = new Demo();
demo.init();
</script>
</body>
</html>
附上两张效果图
将html标签转义
将html标签转义后字符串反转义成html标签
这里有防js代码注入的文章
. 防js代码注入 http://blog.csdn.net/wx11408115/article/details/78201544