jQuery.parseHTML()

类别：实用工具

jQuery.parseHTML( data [, context ] [, keepScripts ] )返回类型：Array

描述：把一个字符串解析为一个DOM节点的数组。

jQuery.parseHTML使用原生的方法来把字符串转换为一个DOM节点的集合，然后它可以被插入到文档中。这些方法都呈现所有前部或后部的文本（哪怕它仅仅是空白）。若要防止前部和后部的空白被转换为文本节点，你可以让该HTML字符串先通过jQuery.trim()。

默认情况下，如果没有指定context，或者把它指定为null或undefined，则context是当前document。如果HTML需要被用到其它文档中，譬如一个iframe中，就使用此框架的document。

自从jQuery 3.0以来，此默认行为改变了。如果没有指定context，或者把它指定为null或undefined，就使用一个新的document。这可能会增加安全性，因为当解析HTML时，内联的事件不会被执行。一旦经解析的HTML被注入到文档，它还是会执行的，但是这使工具有机会去遍历刚创建的DOM，并删除任何不安全的东西。这种改进没有应用于jQuery.parseHTML的内部使用，因为它们通常传入当前的document。因此，像$( "#log" ).append( $( htmlString ) )这样的语句依然受制于恶意代码的注入。

安全考虑

大多数接受HTML字符串的jQuery API，将运行HTML内部的脚本。jQuery.parseHTML并不运行经解析的HTML内部的脚本，除非keepScripts明确为true。然而，在大多数环境中，脚本依然会间接地执行，例如，通过<img onerror>特性来执行。调用者需要小心这一点，并保持警惕，从源码中清除或转义任何不可信的输入，譬如URL或cookies。为了未来的兼容性，当keepScripts未指定或指定为false时，调用者不应该依赖于此能力来运行任何脚本内容。

示例：

创建一个DOM节点的数组，使用HTML字符串，并把它插入到<div>中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.parseHTML demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="log">
  <h3>Content:</h3>
</div>
 
<script>
var $log = $( "#log" ),
  str = "hello, <b>my name is</b> jQuery.",
  html = $.parseHTML( str ),
  nodeNames = [];
 
// Append the parsed HTML
$log.append( html );
 
// Gather the parsed HTML's node names
$.each( html, function( i, el ) {
  nodeNames[ i ] = "<li>" + el.nodeName + "</li>";
});
 
// Insert the node names
$log.append( "<h3>Node Names:</h3>" );
$( "<ol></ol>" )
  .append( nodeNames.join( "" ) )
  .appendTo( $log );
</script>
 
</body>
</html>

演示：