动力节点首页 全国咨询热线:400-8080-105

绑定手机号,登录
手机号

验证码

微信登录
手机号登录
手机号

验证码

微信登录与注册
微信扫码登录与注册

扫码关注微信公众号完成登录与注册
手机号登录
首页 > 文章

Javascript进行HTML转义实例

04-26 16:24 746浏览
举报 T字号
  • 大字
  • 中字
  • 小字

众所周知页面上的字符内容通常都需要进行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)通常转义为“ ”也就是“ ”。

转义的代码非常简单:

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) 对于诸如“<”,需要建立一张如下的表来查询。

 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.完整版本的代码 

   $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);

在实际的使用中可以有两种方式:

  • 使用js.lang.String.encodeHtml(s)和js.lang.String.decodeHtml(s)。
  • 还可以直接扩展String的prototype

怎么样,看完了本文的实例论证,你是否学会了转义HTML了呢?其实,正是因为JavaScript转义HTML页面的字符,我们才能完美地在页面上呈现出各种各样的HTML字符,这对前端页面开发来说是意义非凡的。

0人推荐
共同学习,写下你的评论
0条评论
代码小兵498
程序员代码小兵498

153篇文章贡献528999字

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

JavaWeb的3大组件

代码小兵49806-11 15:28

全面解析Cookie技术

代码小兵49806-11 15:51

浅谈JavaWeb架构演变

代码小兵49806-11 16:22

探讨Web开发中的Session存储与管理

代码小兵51603-29 17:28

JavaScript基础知识

 暴风城-小飞04-06 20:49

发评论

举报

0/150

取消