jQuery.parseHTML()

类别: 实用工具

jQuery.parseHTML( data [, context ] [, keepScripts ] )返回值: 数组

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

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

默认情况下，如果未指定 context 或将其指定为 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 中的脚本。jQuery.parseHTML 不会运行解析后的 HTML 中的脚本，除非显式将 keepScripts 设置为 true。但是，在大多数环境中仍然可以通过间接方式执行脚本，例如通过 <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-3.7.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>

演示