AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用Javascript（js）进行HTML转义工具（处理特殊字符显示）

2016-12-13 1533
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 转自：http://blog.csdn.net/hj7jay/article/details/51280405 众所周知页面上的字符内容通常都需要进行HTML转义才能正确显示，尤其对于Input，Textarea提交的内容，更是要进行转义以防止javascript注入攻击。
转自：http://blog.csdn.net/hj7jay/article/details/51280405 

众所周知页面上的字符内容通常都需要进行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)通常转义为“ ”也就是“ ”。
  转义的代码非常简单：
  
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. this.encodeHtml = function(s){  
  2.       return (typeof s != "string") ? s :  
  3.           s.replace(this.REGX_HTML_ENCODE,  
  4.                     function($0){  
  5.                         var c = $0.charCodeAt(0), r = ["&#"];  
  6.                         c = (c == 0x20) ? 0xA0 : c;  
  7.                         r.push(c); r.push(";");  
  8.                         return r.join("");  
  9.                     });  
  10.   };  
** 2、反转义
  既然有转义，自然需要反转义。
  1） 对“&#num;”实体编号的转义，直接提取编号然后fromCharCode就可以得到字符。
  2） 对于诸如“<”，需要建立一张如下的表来查询。
   this.HTML_DECODE = {
        "<"  : "<", 
        ">"  : ">", 
        "&" : "&", 
        " ": " ", 
        """: "\"", 
        "©": "©"
        // Add more
   };
  由此我们可以有反转义的正则表达式：
  this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
  反转的代码也很简单，如下：
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. this.decodeHtml = function(s){  
  2.       return (typeof s != "string") ? s :  
  3.           s.replace(this.REGX_HTML_DECODE,  
  4.                     function($0,$1){  
  5.                         var c = this.HTML_ENCODE[$0]; // 尝试查表  
  6.                         if(c === undefined){  
  7.                             // Maybe is Entity Number  
  8.                             if(!isNaN($1)){  
  9.                                 c = String.fromCharCode(($1 == 160) ? 32 : $1);  
  10.                             }else{  
  11.                                 // Not Entity Number  
  12.                                 c = $0;  
  13.                             }  
  14.                         }  
  15.                         return c;  
  16.                     });  
  17.   };  

** 3、一个有意思的认识
  其实在用正则表达式转义之前，我一直都是用遍历整个字符串，逐个比较字符的方式。直到有一天，看到一篇文章说，javascript正则表达式是C实现的，比自己用javascript遍历字符要快，于是我就试着改写成上面这种方式。虽然代码看起来的确显得神秘而又牛叉，但遗憾的是，在我的Chrome 11 (FreeBSD 64 9.0)上，遍历字符转义/反转的方式要比上面正则表达式的代码快2到3倍（字符串长度越长越明显）。其实，想想也能明白为什么。
** 4、完整版本的代码
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. $package("js.lang"); // 没有包管理时，也可简单写成 js = {lang:{}};  
  2.   
  3. js.lang.String = function(){  
  4.   
  5.     this.REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;  
  6.   
  7.     this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;  
  8.   
  9.     this.REGX_TRIM = /(^\s*)|(\s*$)/g;  
  10.   
  11.     this.HTML_DECODE = {  
  12.         "<" : "<",   
  13.         ">" : ">",   
  14.         "&" : "&",   
  15.         " ": " ",   
  16.         """: "\"",   
  17.         "©": ""  
  18.   
  19.         // Add more  
  20.     };  
  21.   
  22.     this.encodeHtml = function(s){  
  23.         s = (s != undefined) ? s : this.toString();  
  24.         return (typeof s != "string") ? s :  
  25.             s.replace(this.REGX_HTML_ENCODE,   
  26.                       function($0){  
  27.                           var c = $0.charCodeAt(0), r = ["&#"];  
  28.                           c = (c == 0x20) ? 0xA0 : c;  
  29.                           r.push(c); r.push(";");  
  30.                           return r.join("");  
  31.                       });  
  32.     };  
  33.   
  34.     this.decodeHtml = function(s){  
  35.         var HTML_DECODE = this.HTML_DECODE;  
  36.   
  37.         s = (s != undefined) ? s : this.toString();  
  38.         return (typeof s != "string") ? s :  
  39.             s.replace(this.REGX_HTML_DECODE,  
  40.                       function($0, $1){  
  41.                           var c = HTML_DECODE[$0];  
  42.                           if(c == undefined){  
  43.                               // Maybe is Entity Number  
  44.                               if(!isNaN($1)){  
  45.                                   c = String.fromCharCode(($1 == 160) ? 32:$1);  
  46.                               }else{  
  47.                                   c = $0;  
  48.                               }  
  49.                           }  
  50.                           return c;  
  51.                       });  
  52.     };  
  53.   
  54.     this.trim = function(s){  
  55.         s = (s != undefined) ? s : this.toString();  
  56.         return (typeof s != "string") ? s :  
  57.             s.replace(this.REGX_TRIM, "");  
  58.     };  
  59.   
  60.   
  61.     this.hashCode = function(){  
  62.         var hash = this.__hash__, _char;  
  63.         if(hash == undefined || hash == 0){  
  64.             hash = 0;  
  65.             for (var i = 0, len=this.length; i < len; i++) {  
  66.                 _char = this.charCodeAt(i);  
  67.                 hash = 31*hash + _char;  
  68.                 hash = hash & hash; // Convert to 32bit integer  
  69.             }  
  70.             hash = hash & 0x7fffffff;  
  71.         }  
  72.         this.__hash__ = hash;  
  73.   
  74.         return this.__hash__;   
  75.     };  
  76.   
  77. };  
  78.   
  79. js.lang.String.call(js.lang.String);  

   在实际的使用中可以有两种方式：
  1）使用js.lang.String.encodeHtml(s)和js.lang.String.decodeHtml(s)。
  2）还可以直接扩展String的prototype
  
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. js.lang.String.call(String.prototype);  
  2.   
  3.   // 那么  
  4.   
  5.   var str = "&'\"中国abc def";  
  6.   
  7.   var ec_str = str.encodeHtml();  
  8.     
  9.   document.write(ec_str);  
  10.     
  11.   document.write(""); // CU的博客在线编辑有bug,  
  12. 放不上来！！！  
  13.   
  14.   var dc_str = ec_str.decodeHtml();  
  15.   
  16.   document.write(dc_str);  

若转载请注明出处！若有疑问，请回复交流！
文章标签：
JavaScript
Web App开发
前端开发
Unix
关键词：
JavaScript JS
HTML字符
JavaScript HTML
JavaScript转义
JavaScript工具
java牛
目录
相关文章
温轻舟
|
24天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
103 1
蓝易云
|
29天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
41 3
疯狂的猿
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果，可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素，向下拖拽可实现删除效果，简单实用，欢迎下载
疯狂的猿
41 4
mao29955
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具，可以较为准确地检测 JavaScript 中的内存泄漏问题，并帮助我们找出潜在的泄漏点，以便采取相应的解决措施。
mao29955
183 9
疯狂的猿
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码，在公路上开车网页小游戏源代码。
疯狂的猿
55 0
html5+three.js公路开车小游戏源码
夏天49597
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架，由 Vercel 开发。本文从基础概念出发，逐步探讨 Next.js 的常见问题、易错点及解决方法，并通过具体代码示例进行说明，帮助开发者快速构建高性能的 Web 应用。
夏天49597
79 10
二二*一一
|
28天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
48 1
土木林森
|
14天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
26 6
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
42 1
[HTML、CSS]细节与使用经验
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
33 1
[HTML、CSS]知识点

热门文章

最新文章

  • 1
    再来 10 个新鲜的 HTML5 教程
  • 2
    MDN Web技术文档 - HTML 元素
  • 3
    Skytte：一款令人印象深刻的 HTML5 射击游戏
  • 4
    HTML5 Storage API
  • 5
    jQuery从html代码中获取对应标签的写法
  • 6
    在Pyramid中使用Mako模板以及默认和.html后缀关联
  • 7
    HTML5 &lt;script&gt;元素async,defer异步加载
  • 8
    vs 2010 支持 html5
  • 9
    初识HTML
  • 10
    HTML5特性速记图
  • 1
    使用Vue.js构建交互式前端的技术探索
    87
  • 2
    使用Node.js构建实时聊天应用的技术指南
    121
  • 3
    深入理解JavaScript中的事件循环机制
    85
  • 4
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    115
  • 5
    JavaScript 数组方法概览
    37
  • 6
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    64
  • 7
    JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
    47
  • 8
    JavaScript 提供了多种方法来操作 DOM（文档对象模型）
    48
  • 9
    JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
    58
  • 10
    JavaScript 的垃圾回收机制有一些潜在的缺点
    41

    • 相关课程

    更多
  • HTML 入门与实战
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月