jQuery.parseHTML() 函数详解

定义和用法

$.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时，调用者不应该依赖于这个能力来运行任何脚本内容。

赞 (0)

相关推荐

  • jQuery.parseHTML() 函数详解

    定义和用法 $.parseHTML() 函数用于将HTML字符串解析为对应的DOM节点数组. 注意: 1. 该函数将使用原生的DOM元素创建函数把HTML字符串转换为一个DOM元素的集合,你可以将这些DOM元素插入到文档中. 2. 如果没有指定context参数,或该参数为null或undefined,则默认为当前document.如果创建的DOM元素用于另一个文档,例如iframe,则应该指定该iframe的document对象. 安全考虑:大多数jQuery API都允许HTML字符串在HT

  • jQuery position() 函数详解以及jQuery中position函数的应用

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标.该函数只对可见元素有效. 所谓"被定位的元素",就是元素的CSS position属性值为absolute.relative或fixed(只要不是默认的static即可). 该函数返回一个坐标对象,该对象有一个left属性和top属性.属性值均为数字,它们都以像素(px)为单位. 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offse

  • jQuery 遍历函数详解

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数. .end(

  • jQuery.parseJSON()函数详解

    jQuery.parseJSON()函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象. 所谓"格式完好",就是要求指定的字符串必须符合严格的JSON格式,例如:属性名称必须加双引号.字符串值也必须用双引号. 如果传入一个格式不"完好"的JSON字符串将抛出一个JS异常,例如:以下字符串均符合JSON格式,但它们不是格式完好的JSON字符串(因此会抛出异常): // 以下均是字符串值,省略了两侧的引号,以便于展现内容 {id: 1} // id

  • jQuery功能函数详解

    在javascript编程中,开发者通常需要编写很多小程序来实现一些特定的功能.例如浏览器检测,字符串处理.数组的编辑等.jQuery对这些常用的程序进行了总结,提供了很多实用的函数. 1.检测浏览器. jQuery通过$.browser对象获取浏览器信息. 属性 说明 msie 如果是ie为true,否则为false mozilla 如果是mozilla相关的浏览器为true,否则为false safari 如果是Safari浏览器为true,否则为false poera 如果是opera浏览

  • jQuery.extend 函数详解

    JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: 复制代码 代码如下: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用: 复制代码 代码

  • jQuery3.0中的buildFragment私有函数详解

    jQuery3.0中的buildFragment私有函数详解

    时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0 版本 jQuery 3.0 对应之前的 2.x,关注更新的浏览器,对于IE支持到 9.0 版本 此外, 3.0还增加了对 Yandex 浏览器的支持,一款来自俄罗斯的浏览器. 下面看下jQuery3.0中的buildFragment. 在 jQuery

  • javascript中Array()数组函数详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:http://www.jb51.net/article/26903.htm $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data ,

  • jQuery数组处理详解(含实例演示)

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代

随机推荐