jQuery.parseHTML() 函数详解


Posted in Javascript onJanuary 09, 2017

定义和用法

$.parseHTML() 函数用于将HTML字符串解析为对应的DOM节点数组。

注意:

1. 该函数将使用原生的DOM元素创建函数把HTML字符串转换为一个DOM元素的集合,你可以将这些DOM元素插入到文档中。

2. 如果没有指定context参数,或该参数为null或undefined,则默认为当前document。如果创建的DOM元素用于另一个文档,例如iframe,则应该指定该iframe的document对象。

安全考虑:大多数jQuery API都允许HTML字符串在HTML中包含运行脚本。 jQuery.parseHTML()不会运行解析的HTML中的脚本,除非你明确将参数keepScripts指定为true。 不过,大多数环境仍然可以间接地执行脚本,例如:通过属性。调用者应该避免 这样做,并清理或转义诸如URL、cookie等来源的任何不受信任的输入,从而预防出现这种情况。 出于未来的兼容性考虑,当参数keepScripts被省略或为false时,调用者应该不依赖任何运行脚 本内容的能力。

语法

$.parseHTML( htmlString [, context ] [, keepScripts ] )

参数 描述
htmlString String类型 需要解析并转为DOM节点数组的HTML字符串
context Element类型 指定在哪个Document中创建元素,默认为当前文档的document
keepScripts Boolean类型 指定传入的HTML字符串中是否包含脚本,默认为false

实例
使用一个HTML字符串创建一个数组的Dom节点,并将它插入一个div

<div id="log">
  <h3>Content:</h3>
</div>
<script>
$(function () { 
  var $log = $( "#log" ),
    str = "hello, <b>my name is</b> jQuery.",
    html = $.parseHTML( str ),
    nodeNames = [];
  //添加已解析的HTML
  $log.append( html );
  //集合已解析HTML的节点名称
  $.each( html, function( i, el ) {
    nodeNames[i] = "<li>" + el.nodeName + "</li>";
  });
  // 插入节点名
  $log.append( "<h3>Node Names:</h3>" );
  $( "<ol></ol>" )
    .append( nodeNames.join( "" ) )
    .appendTo( $log );
})
</script>

示例&说明

以下是与jQuery.parseHTML()函数相关的jQuery示例代码,以演示jQuery.parseHTML()函数的具体用法:

// "<\/script>"必须通过\将/转义,否则JS会认为已经到了脚本结束的位置
var html = 'Hello,<b>CodePlayer</b><script type="text/javascript">alert("执行脚本代码");<\/script>';


var doms = $.parseHTML( html );
// 不会执行脚本代码
$("#n1").append(doms);

alert("分割线");

doms = $.parseHTML( html, true );
// 会执行脚本代码
$("#n1").append(doms);

返回值

jQuery.parseHTML()函数的返回值为Array类型,返回解析指定HTML字符串后的DOM节点数组。

jQuery.parseHTML使用原生方法将字符串转换为一个DOM节点的集合,然后可以插入到文档。 这些方法渲染所有尾随或前导文本(即使只是空格)。 为了防止尾随/前导空格被转换为文本节点,你可以通过将HTML字符串传递给jQuery .trim。

默认情况下,如果没有指定或给定null 或 undefined,context是当前的document。如果HTML被用在另一个document中,比如一个iframe,该frame的文件可以使用。

在3.0中,这种默认行为已经被改变。如果没有指定context,或者给定值为null 或 undefined,那么将使用一个新的document。这有可能会提高安全性,因为当HTML解析时,内嵌的事件将不会执行。一旦解析的HTML注入到文档中它会执行,但是这给工具一个机会,遍历创建DOM和删除任何东西被视为不安全。这种改进并不适用于jQuery.parseHTML的内部使用,因为他们通常传递给当前文档。因此,如类似$( "#log" ).append( $( htmlString ) )的声明,仍然受制于恶意代码注入。

Security Considerations(安全注意事项)

大多数的jQuery的API接受的HTML字符串将运行所包含在HTML中的脚本。jQuery.parseHTML不运行HTML中解析出来的脚本,除非 keepScripts参数为true。然而,它仍然是可能在大多数环境中间接地执行脚本,例如通过<img onerror>属性。调用者应该意识到这一点,并通过清理或避免任何不可信来源的输入,如URL或cookies,来防止它。为了未来的兼容性,当keepScripts为不确定的或false时,调用者不应该依赖于这个能力来运行任何脚本内容。

Javascript 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
纯javascript制作日历控件
Jul 17 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 #Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 #Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 #Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 #Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 #Javascript
jquery实现多次上传同一张图片
Jan 09 #Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 #Javascript
You might like
php,不用COM,生成excel文件
2006/10/09 PHP
PHP中Session的概念
2006/10/09 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
ext实现完整的登录代码
2008/08/08 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
浅谈vue权限管理实现及流程
2020/04/23 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python 连续不等式语法糖实例
2020/04/15 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
大学生自我鉴定书
2014/03/24 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书