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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
javascript实现日历效果
Jun 17 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
JS判断数组那点事
2017/10/10 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
python图像常规操作
2017/11/11 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python实现手势识别的示例(入门)
2020/04/15 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
机械绘图员岗位职责
2013/11/19 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
幼儿教育感言
2014/02/05 职场文书
党员干部公开承诺书
2014/03/26 职场文书
2014年超市工作总结
2014/11/19 职场文书
办公室日常管理制度
2015/08/04 职场文书
python tkinter模块的简单使用
2021/04/07 Python