如何拆分含HTML标记标签的字符串，分离标签包裹的子串为数组？

解决方法 #

直接用带捕获分组的正则做字符串拆分即可，正则会自动把匹配到的完整标签块和剩余普通文本共同保留在拆分结果中，最后过滤掉空值就可以得到目标格式的数组。

可用代码

const splitHtmlText = (str) => {
  // 兼容匹配带属性和不带属性的成对HTML标签块
  return str.split(/(<[a-zA-Z]+\s*.*?>.*?<\/[a-zA-Z]*>)/g)
    .filter(item => item.trim())
}

效果测试

测试第一个用例：

const str1 = "this is <mark>just an</mark> example <mark>snippet</mark>"
console.log(splitHtmlText(str1))
// 输出结果：["this is", "<mark>just an</mark>", "example", "<mark>snippet</mark>"]

测试带属性标签的用例：

const str2 = '<b class="highlight">Paradise</b> Lost'
console.log(splitHtmlText(str2))
// 输出结果：["<b class=\"highlight\">Paradise</b>", "Lost"]

原理说明

• split方法传入带括号捕获的正则时，所有匹配到的捕获内容都会和普通文本交替保留在返回数组里，正好符合拆分需求
• 正则里的\s*兼容了标签名后有无空格的场景，同时支持带属性和不带属性的标签匹配
• 最后的filter用来过滤拆分产生的空字符串、纯空白内容

内容的提问来源于stack exchange，提问作者Muhammad Ashraf