如何使用正则表达式将br，p，div标记拆分为数组

Question

我正在尝试将一个html字符串拆分成一个数组并且失败了。下面的代码是剥离“＆lt;”和“＆gt;”但保留标签名称。

var html = 'line 1
 <div>line 2</div>
 <div>line <span class="underline">3</span></div>
 <div>line <stong>4</string></div>
 <p>line <em>5<em></p>
 <br> line 6
 <br /> line 7
 <br/> line 8
 <img src=""/>'

var val = html.split(/<\/?(div|p|br)[^>]*>/igm)
console.log (val)  // ["↵    line 1↵    ", "div", "line 2", "div", "↵    ", "div", "line <span class="underline">3</span>", "div", "↵    ", "div", "line <strong>4</strong>", "div", "↵    ", "p", "line <em>5</em>", "p", "↵    ", "br", " line 6↵    ", "br", " line 7↵    ", "br", " line 8↵    <img src="">↵"]

有更好的方法吗？我意识到我可以使用dom操作，但我更喜欢使用正则表达式，因为它与服务器端js兼容

Answer 1

我不建议使用正则表达式完成此任务。但是看着你的分裂正则表达式你使用捕获组犯了一个错误：

var val = html.split(/<\/?(div|p|br)[^>]*>/igm);

让它像这样不捕捉：

var val = html.split(/<\/?(?:div|p|br)[^>]*>\s*/im);

原因：大多数Javascript引擎都会将分组返回到分割函数调用的结果数组中。

结果：应用建议的正则表达式后：

["", "line 1", "", "line 2", "", "line <span class='underline'>3</span>", "", "line <stong>4</string>", "", "line <em>5<em>", "", "line 6\n", "line 7\n", "line 8\n<img src=''/>"]

现场演示：http://ideone.com/tM9Qg3

Answer 2

这是因为你正在使用括号，并且内部的内容被添加到结果中。这不会很好，但是这样的事情怎么样？

var val = html.split(/<.+?>/)