javascript - 将一个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是修饰符：不区分大小写、全局、点匹配所有符号和多行。