JS及JQuery对Html内容编码,Html转义

原文  http://blog.csdn.net/phantomes/article/details/26570113

/** 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 $('
').text(value).html();
}
//Html解码获取Html实体
function htmlDecode(value){
  return $('
').html(value).text();
}
script>

//编码
  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(/"<");
    s = s.replace(/>/g, ">");
    s = s.replace(/ /g, " ");
    s = s.replace(/'/g, "\'");
    s = s.replace(/"/g, "\"");
    s = s.replace(/
/g, "\n");
    return s;
  }

比如有这样的hltml代码:

<a id="pcmobile" class="" " href="javascript:void(0);">PC&MOBILEa>

<aid="test" href="javascript:void(0);"><a>

如果直接用

$("# pcmobile").html()方法，那取得的值默认被浏览器转义了，原来的 &变成了 &。所以a标签里面的值变成PC&MOBILE。

同样的，<被转义成<，>被转义成>。

有时候为了防止xss注入，这种转义是有必要的，但是，如果不想被转义，解决方案很简单，不用html()方法 ，改成

text()方法就行了.如 $("# pcmobile").text()。

部分字符转义如下：

•  &符号："&", "&"
• 双引号："\"", """
• 小于号："<", "<"
• 大于号：">", ">"
• 单引号："'", "'"