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

悠悠 2022-07-28 01:23 151阅读 0赞

原文  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 $('<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()。

部分字符转义如下：
     
      
        &符号："&", "&"
       双引号："\"", """
       小于号："<", "<"
       大于号：">", ">"
       单引号："'", "'"