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>

这是因为正则表达式只能处理regular languages，而HTML是真正的context-free language（而且无上下文比常规表达式“更复杂”）。

另请参阅：https://stackoverflow.com/a/1732454/2170192

但是如果你没有相同类型的嵌套元素，你可以通过获取以下正则表达式（使用反向链接）返回的所有匹配来拆分你的html字符串：

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

<(\w+)匹配小于号和几个单词字符（字母，数字，下划线），同时通过括号（第一个捕获组）捕获单词字符。
.*匹配元素的内容。
<\/匹配结束标记的开头。
\1是反向引用，它与通过第一个捕获组捕获的符号序列完全匹配。
\s*>匹配可选空格和大于号。
igsm是修饰符：不区分大小写，全局，点匹配所有符号和多行。

将一串html拆分为字符串数组，按顶级标记拆分

3 个答案: