當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。