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/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
Vuex的实战使用详解
Oct 31 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
Vue组件模板的几种书写形式(3种)
Feb 19 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
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
PHP7 其他修改
2021/03/09 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
pycharm创建一个python包方法图解
2019/04/10 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
机关门卫的岗位职责
2014/04/29 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
化工实习心得体会
2014/09/09 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers