Prototype源码浅析 String部分(三)之HTML字符串处理


Posted in Javascript onJanuary 15, 2012
HTML处理 stripTags  | escapeHTML |  unescapeHTML
   
JSON处理 unfilterJSON |  isJSON |  evalJSON |  parseJSON
脚本处理 stripScripts |  extractScripts  | evalScripts
现在,String部分转入具体的关联应用,分别对应
HTML字符串,JSON字符串和HTML中的脚本字符串。
【乱入一句,有关JSON的一点东西,可以看看http://www.cnblogs.com/TomXu/archive/2012/01/11/2311956.html】
下面分别叙述:
一、HTML字符串
stripTags :移除字符串中所有的 HTML 标签。
escapeHTML : 将 HTML 特殊字符转换为它们的等价实体。(&对应& <对应< >对应> )
unescapeHTML :移除字符串中的标签,并将用实体表示的 HTML 特殊字符转换为它们的正常形式。(escapeHTML 的逆操作)
stripTags 中的一段正则/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?>|<\/\w+>/gi用来匹配标签中的内容,注意不能换行,不过换行的话就有语法错误了。
【这个方法唯一需要注意的位置是,stripTags会移除<script>标签,但是不会移除里面的内容,所以可能将<script>里面的内容暴露出来,影响页面结构】
二、脚本字符串
stripScripts : 移除字符串中所有的 HTML script 块。弥补stripTags方法对script标签的缺陷
extractScripts :提取出字符串中包含的所有 script 的内容,并将之返回作为一个字符串数组。
evalScripts :执行字符串中包含的所有 script 块的内容。返回一个数组,该数组包含每个 script 执行后返回的值。
stripScripts中的正则是对stripTags中一个正则的发展
function stripScripts() { 
var pattern = new RegExp('<script[^>]*>([\\S\\s]*?)<\/script>', 'img');//i忽略大小写,m换行,g全局 
return this.replace(pattern , ''); 
}

function extractScripts() { 
var matchAll = new RegExp('<script[^>]*>([\\S\\s]*?)<\/script>', 'img'), 
matchOne = new RegExp('<script[^>]*>([\\S\\s]*?)<\/script>', 'im'); 
return (this.match(matchAll) || []).map(function(scriptTag) { 
return (scriptTag.match(matchOne) || ['', ''])[1]; 
}); 
}

map是对数组的一个扩展,某些浏览器有这个原生方法,参见《chrome原生方法之数组》
最后获得的是一个所有script标签内部内容的一个数组,因此evalScripts 的做法就很自然的可以想出来——循环遍历获得的数组,然后依次执行(eval),存储每一项执行的结果。
function evalScripts() { 
return this.extractScripts().map(function(script) { return eval(script) }); 
}

三、JSON处理
unfilterJSON:移除 Ajax JSON 或 JavaScript 响应内容周围的安全注释界定符。
isJSON:使用正则表达式检测字符串是否是合法的 JSON 格式
evalJSON:执行一个 JSON 格式的字符串,并返回结果对象
其中isJSON和evalJSON就是JSON.js中的parseJSON,而且代码也差不多,参见《从字符串中解析出JSON》
顺便说一点unfilterJSON中的安全注释界定符,这是一种安全机制,对于自家的数据,可以在返回值两端加上特殊的字符(界定符)来表明数据的来源,客户端解析的时候用unfilterJSON来处理掉添加的界定符,借此可以在一定程度上减少一些XSS的攻击。
Prototype中默认的形式是:
'/*-secure-\n{"name": "小西山子","age": 24}\n*/'
其中界定符号是 /*-secure-\n'和'\n*/'
Javascript 相关文章推荐
一些技巧性实用js代码小结
Oct 14 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
canvas实现图像放大镜
Feb 06 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 #Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 #Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 #Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 #Javascript
20个最新的jQuery插件
Jan 13 #Javascript
JSON 数据格式介绍
Jan 13 #Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 #Javascript
You might like
phpmyadmin操作流程
2006/10/09 PHP
十天学会php之第六天
2006/10/09 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
非常实用的php验证码类
2016/05/15 PHP
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python使用marshal模块序列化实例
2014/09/25 Python
python下10个简单实例代码
2017/11/15 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
师德个人剖析材料
2014/02/02 职场文书
《问银河》教学反思
2014/02/19 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书