將html字符串拆分為字符串數組，並按頂級標簽拆分

Question

說我有

var string = 
"<h1>Header</h1>
<p>this is a small paragraph</p>
<ul>
    <li>list element 1.</li>
    <li>list element 2.</li>
    <li>list element 3. With a small update.</li>
</ul>"
//newlines for clarity only

如何使用JavaScript拆分此字符串，以便獲得

var array = string.split(/*...something here*/)

array = [
"<h1>Header</h1>",
"<p>this is a small paragraph</p>",
"<ul><li>list element 1.</li><li>list element 2.</li><li>list element 3. With a small update.</li></ul>"
]

我只想拆分頂部的html元素，而不是子元素。

Answer 1

您可以執行以下操作：

var string = '<div><p></p></div><h1></h1>';
var elements = $(string).map(function() {
    return $('<div>').append(this).html();  // Basically `.outerHTML()`
});

結果：

["<h1>Header</h1>", "<p>this is a small paragraph</p>", "<ul>    <li>list element 1.</li>    <li>list element 2.</li>    <li>list element 3. With a small update.</li></ul>"]

Answer 2

高效的解決方案（ http://jsperf.com/spliting-html ）：

var splitter = document.createElement('div'),
  text = splitter.innerHTML = "<h1>Header</h1>\
<p>this is a small paragraph</p>\
<ul>\
    <li>list element 1.</li>\
    <li>list element 2.</li>\
    <li>list element 3. With a small update.</li>\
</ul>",
  parts = splitter.children,
  part = parts[0].innerHTML;

Answer 3

您不能 使用正則表達式執行此操作。 如果您有多個相同類型的嵌套元素，則您的正則表達式將失敗，例如

<div>
  <div>
    <div>
    </div>
  </div>
</div>

這是因為正則表達式只能處理正則語言 ，而HTML是真正的無上下文語言 （並且無上下文比正則“更復雜”）。

另請參閱： https : //stackoverflow.com/a/1732454/2170192

但是，如果您沒有相同類型的嵌套元素，則可以通過采用以下正則表達式（使用反向鏈接）返回的所有匹配項來拆分html字符串：

/<(\w+).*<\/\1\s*>/igsm

• <(\\w+)匹配小於號和幾個單詞字符（字母，數字，下划線），同時通過括號捕獲單詞字符（第一個捕獲組）。
• .*匹配元素的內容。
• <\\/匹配結束標簽的打開。
• \\1是與通過第一個捕獲組捕獲的符號序列完全匹配的后向引用 。
• \\s*>匹配可選的空格和大於號。
• igsm是修飾符 ：不區分大小寫，全局，點匹配所有符號和多行。