您的位置:首页 > Web前端 > JavaScript

js 转义html 字符串

2017-01-23 09:55 417 查看
/** JQuery Html Encoding、Decoding
* 原理是利用JQuery自带的html()和text()函数可以转义Html字符
* 虚拟一个Div通过赋值和取值来得到想要的Html编码或者解码
*/
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
//Html编码获取Html转义实体
function htmlEncode(value){
return $('<div/>').text(value).html();
}
//Html解码获取Html实体
function htmlDecode(value){
return $('<div/>').html(value).text();
}
</script>
//编码
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;
}


比如有这样的hltml代码:<a id="pcmobile" class="" " href="javascript:void(0);">PC&MOBILE</a><aid="test" href="javascript:void(0);"><</a>如果直接用$("#pcmobile").html()方法,那取得的值默认被浏览器转义了,原来的&变成了&。所以a标签里面的值变成PC&MOBILE。同样的,<被转义成<,>被转义成>。有时候为了防止xss注入,这种转义是有必要的,但是,如果不想被转义,解决方案很简单,不用html()方法 ,改成text()方法就行了.如$("#pcmobile").text()。


部分字符转义如下: &符号:"&", "&"
双引号:"\"", """
小于号:"<", "<"
大于号:">", ">"
单引号:"'", "'"
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: