jquery处理html格式的数据

最新推荐文章于 2022-02-25 16:01:24 发布

原创最新推荐文章于 2022-02-25 16:01:24 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍jQuery.parseHTML方法，用于将HTML字符串解析成DOM节点数组。文章详细解释了该方法的参数，包括HTML字符串、上下文元素及是否保留脚本选项，并提供了安全注意事项和示例代码。

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

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

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

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

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

Security Considerations（安全注意事项）

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

例子:

Create an array of Dom nodes using an HTML string and insert it into a div.

 
          <!DOCTYPE html>
         
          <html>
         
          <head>
         
            <script src="http://code.jquery.com/jquery-latest.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>