• 用Javascript进行HTML转义(分享)


      众所周知页面上的字符内容通常都需要进行HTML转义才能正确显示,尤其对于Input,Textarea提交的内容,更是要进行转义以防止javascript注入攻击。
      通常的HTML转义主要是针对内容中的"<",">","&",以及空格、单双引号等。但其实还有很多字符也需要进行转义。具体的可以参考这篇文章。
     
    ** 1、HTML转义
     
      参考上面的提到的文章,基本上可以确定以下的转义的范围和方式。
     
      1)对"""、"&"、"'"、"<"、">"、空格(0x20)、0x00到0x20、0x7F-0xFF
      以及0x0100-0x2700的字符进行转义,基本上就覆盖的比较全面了。
      
       用javascript的正则表达式可以写为:
     
    this.REGX_HTML_ENCODE = /"|&|'|<|>|[x00-x20]|[x7F-xFF]|[u0100-u2700]/g; 
     
      2)为保证转义结果对浏览器的无差别,转义编码为实体编号,而不用实体名称。
      
      3)空格(0x20)通常转义为“&nbsp;”也就是“&#160;”。
     
      转义的代码非常简单:
     
      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("");
                        });
      };
     
     
    ** 2、反转义
     
      既然有转义,自然需要反转义。
     
      1) 对“&#num;”实体编号的转义,直接提取编号然后fromCharCode就可以得到字符。
     
      2) 对于诸如“&lt;”,需要建立一张如下的表来查询。
     
        this.HTML_DECODE = {
            "&lt;"  : "<", 
            "&gt;"  : ">", 
            "&amp;" : "&", 
            "&nbsp;": " ", 
            "&quot;": """, 
            "&copy;": "©"
    
            // Add more
        };
    
     
      由此我们可以有反转义的正则表达式:
     
    this.REGX_HTML_DECODE = /&w+;|&#(d+);/g;
     
      反转的代码也很简单,如下:
     
    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;
                        });
      };
     
    ** 3、一个有意思的认识
     
      其实在用正则表达式转义之前,我一直都是用遍历整个字符串,逐个比较字符的方式。直到有一天,看到一篇文章说,javascript正则表达式是C实现 的,比自己用javascript遍历字符要快,于是我就试着改写成上面这种方式。虽然代码看起来的确显得神秘而又牛叉,但遗憾的是,在我的Chrome 11 (FreeBSD 64 9.0)上,遍历字符转义/反转的方式要比上面正则表达式的代码快2到3倍(字符串长度越长越明显)。其实,想想也能明白为什么。
     
    ** 4、完整版本的代码
     
    $package("js.lang"); // 没有包管理时,也可简单写成 js = {lang:{}};
    
    js.lang.String = function(){
    
        this.REGX_HTML_ENCODE = /"|&|'|<|>|[x00-x20]|[x7F-xFF]|[u0100-u2700]/g;
    
        this.REGX_HTML_DECODE = /&w+;|&#(d+);/g;
    
        this.REGX_TRIM = /(^s*)|(s*$)/g;
    
        this.HTML_DECODE = {
            "&lt;" : "<", 
            "&gt;" : ">", 
            "&amp;" : "&", 
            "&nbsp;": " ", 
            "&quot;": """, 
            "&copy;": ""
    
            // Add more
        };
    
        this.encodeHtml = function(s){
            s = (s != undefined) ? s : this.toString();
            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){
            var HTML_DECODE = this.HTML_DECODE;
    
            s = (s != undefined) ? s : this.toString();
            return (typeof s != "string") ? s :
                s.replace(this.REGX_HTML_DECODE,
                          function($0,$1){
                              var c = HTML_DECODE[$0];
                              if(c == undefined){
                                  // Maybe is Entity Number
                                  if(!isNaN($1)){
                                      c = String.fromCharCode(($1==160)?32:$1);
                                  }else{
                                      c = $0;
                                  }
                              }
                              return c;
                          });
        };
    
        this.trim = function(s){
            s = (s != undefined) ? s : this.toString();
            return (typeof s != "string") ? s :
                s.replace(this.REGX_TRIM, "");
        };
    
    
        this.hashCode = function(){
            var hash = this.__hash__, _char;
            if(hash == undefined || hash == 0){
                hash = 0;
                for (var i = 0, len=this.length; i < len; i++) {
                    _char = this.charCodeAt(i);
                    hash = 31*hash + _char;
                    hash = hash & hash; // Convert to 32bit integer
                }
                hash = hash & 0x7fffffff;
            }
            this.__hash__ = hash;
    
            return this.__hash__; 
        };
    
    };
    
    js.lang.String.call(js.lang.String);
     
     
       在实际的使用中可以有两种方式:
     
      1)使用js.lang.String.encodeHtml(s)和js.lang.String.decodeHtml(s)。
     
      2)还可以直接扩展String的prototype
       
    js.lang.String.call(String.prototype);
    
      // 那么
    
      var str = "<B>&'"中国</B>abc def";
    
      var ec_str = str.encodeHtml();
      
      document.write(ec_str);
      
      document.write("<br><br>");
    
      var dc_str = ec_str.decodeHtml();
    
      document.write(dc_str);

    地址:http://www.myexception.cn/HTML-CSS/888888.html
  • 相关阅读:
    servlet学习之servletAPI编程常用的接口和类
    问题解决
    HTTP Status 500 – Internal Server Error
    用数组模拟队列
    稀疏数组
    值传递机制及几道网红题目
    关于Tomcat配置问题
    Servlet学习笔记
    面向对象笔记
    数组中涉及的常见算法
  • 原文地址:https://www.cnblogs.com/qhyhao/p/3465372.html
Copyright © 2020-2023  润新知