• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • jQuery.parseHTML()

    将字符串解析到一个DOM节点的数组中。

    jQuery.parseHTML(data[, context ][, keepScripts ])
    • data类型: String。用来解析的HTML字符串。
    • context(默认:document)类型: Element。DOM元素的上下文,在这个上下文中将创建的HTML片段。
    • keepScripts(默认:false)类型: Boolean。一个布尔值,表明是否在传递的HTML字符串中包含脚本。

    jQuery.parseHTML使用原生方法将字符串转换为一个DOM节点的集合,然后可以插入到文档。这些方法渲染所有尾随或前导文本(即使只是空格)。为了防止尾随/前导空格被转换为文本节点,你可以通过将HTML字符串传递给jQuery .trim

    默认情况下,如果没有指定或给定nullundefinedcontext是当前的document。如果HTML被用在另一个document中,比如一个iframe,该frame的文件可以使用。

    在3.0中,这种默认行为已经被改变。如果没有指定context,或者给定值为nullundefined,那么将使用一个新的document。这有可能会提高安全性,因为当HTML解析时,内嵌的事件将不会执行。一旦解析的HTML注入到文档中它会执行,但是这给工具一个机会,遍历创建DOM和删除任何东西被视为不安全。这种改进并不适用于jQuery.parseHTML的内部使用,因为他们通常传递给当前文档。因此,如类似$("#log").append($(htmlString))的声明,仍然受制于恶意代码注入。

    Security Considerations(安全注意事项)

    大多数的jQuery的API接受的HTML字符串将运行所包含在HTML中的脚本。jQuery.parseHTML不运行HTML中解析出来的脚本,除非keepScripts参数为true。然而,它仍然是可能在大多数环境中间接地执行脚本,例如通过<img onerror>属性。调用者应该意识到这一点,并通过清理或避免任何不可信来源的输入,如URL或cookies,来防止它。为了未来的兼容性,当keepScripts为不确定的或false时,调用者不应该依赖于这个能力来运行任何脚本内容。

    例子

    使用HTML字符串创建Dom节点数组并将其插入div。

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://www.lanmper.cn/static/js/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>
    

    Content: