javascript - 如何使用正则表达式将 br、p、div 标签拆分为数组

Question

我正在尝试将一个 html 字符串拆分为一个数组并且惨遭失败。下面的代码去掉了“<”和“>”，但留下了标签名称。

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 引擎返回一个捕获分组到 split 函数调用的结果数组中。

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

["", "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(/<.+?>/)