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 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 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者的疑难问答(2)
2006/10/09 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php rsa加密解密使用详解
2015/01/14 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
Tostadora意大利:定制T恤
2019/04/08 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
四年级科学教学反思
2014/02/10 职场文书
婚前保证书
2014/04/29 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
党支部综合考察意见
2015/06/01 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
nginx七层负载均衡配置详解
2022/07/15 Servers