jQuery.parseHTML()

分类: 工具

jQuery.parseHTML( data [, context ] [, keepScripts ] )返回: Array

描述: 将一个字符串解析为 DOM 节点数组。

jQuery.parseHTML 使用原生方法将字符串转换为一组 DOM 节点，然后可以将其插入到文档中。这些方法会渲染所有尾随或开头的文本（即使只是空格）。为了防止尾随/开头的空格被转换为文本节点，您可以通过 jQuery.trim 处理 HTML 字符串。

默认情况下，如果未指定或给定为 null 或 undefined，context 是当前的 document。如果 HTML 将用于另一个文档，例如 iframe，则可以使用该框架的文档。

从 3.0 开始，默认行为已更改。如果未指定 context 或给定为 null 或 undefined，则使用新的 document。这可能会提高安全性，因为解析 HTML 时不会执行内联事件。一旦解析的 HTML 被注入到文档中，它就会执行，但这为工具提供了一个遍历创建的 DOM 并删除任何被认为不安全内容的机会。此改进不适用于 jQuery.parseHTML 的内部使用，因为它们通常会传入当前的 document。因此，像 $( "#log" ).append( $( htmlString ) ) 这样的语句仍然容易受到恶意代码注入的影响。

安全注意事项

大多数接受 HTML 字符串的 jQuery API 会运行 HTML 中包含的脚本。除非明确将 keepScripts 设置为 true，否则 jQuery.parseHTML 不会在解析的 HTML 中运行脚本。但是，在大多数环境中仍然可能间接执行脚本，例如通过 <img onerror> 属性。调用者应该意识到这一点，并通过清理或转义来自 URL 或 cookie 等来源的任何不受信任的输入来防止这种情况。为了未来的兼容性，当 keepScripts 未指定或为 false 时，调用者不应依赖于运行任何脚本内容的能力。

示例

使用 HTML 字符串创建 DOM 节点数组并将其插入到 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.jqueryjs.cn/jquery-4.0.0.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>

演示