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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP编码转换
2012/11/05 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
Javascript 对象的解释
2008/11/24 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python中base64加密解密方法实例分析
2015/05/16 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python netmiko模块的使用
2020/02/14 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
平安家庭示范户事迹
2014/06/02 职场文书
节约能源标语
2014/06/17 职场文书
2014年设计师工作总结
2014/11/25 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript