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


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 字符串。

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

从 3.0 开始,默认行为已更改。如果 context 未指定或指定为 nullundefined ,则使用新的 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()。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。