当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery jQuery.parseHTML()用法及代码示例


用法 
jQuery.parseHTML( data [, context ] [, keepScripts ] ) => Array

说明：将字符串解析为 DOM 节点数组。

  • 添加的版本：1.8jQuery.parseHTML( data [, context ] [, keepScripts ] )

    • data
      类型：String
      要解析的 HTML 字符串
    • context(默认：document)
      类型：Element
      用作创建 HTML 片段的上下文的文档元素
    • keepScripts(默认：false)
      类型：Boolean
      一个布尔值，指示是否包含在 HTML 字符串中传递的脚本

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

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

从 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 时运行 any 脚本内容的能力。

例子：

使用 HTML 字符串创建一个 DOM 节点数组并将其插入到 div 中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.parseHTML demo</title>
  <script src="https://code.jquery.com/jquery-3.5.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>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 jQuery.parseHTML()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。