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.ui.draggable中文文档
Nov 24 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
javascript对象的相关操作小结
May 16 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
layui table 列宽百分比显示的实现方法
Sep 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
php判断正常访问和外部访问的示例
2014/02/10 PHP
php多重接口的实现方法
2015/06/20 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Python自动连接ssh的方法
2015/03/07 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
浅述python中深浅拷贝原理
2018/09/18 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
python爬虫---requests库的用法详解
2020/09/28 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
HTML5等待加载动画效果
2017/07/27 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
车间班组长岗位职责
2013/11/13 职场文书
报到证丢失证明
2014/01/11 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
法学院毕业生求职信
2014/06/25 职场文书
转让协议书范本
2014/09/13 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python