如何用正则表达式基于HTML标签分割目标字符串？

嘿，这个需求我之前也碰到过，直接用正则匹配提取就可以搞定，比用split更贴合你的需求哦！

直接上可运行代码 #

你可以用这个正则表达式精准匹配每个完整的<p>标签内容，结合match()方法就能得到预期结果：

var str = '<p>Hi my name is XXX</p>\n\n<p>Iam going to london</p></p>';
// 核心正则表达式
const pTagRegex = /<p>.*?<\/p>/gs;
const splitString = str.match(pTagRegex);

console.log(splitString);
// 输出完全符合你的预期：
// ['<p>Hi my name is XXX</p>', '<p>Iam going to london</p>']

正则表达式细节拆解 #

给你拆解下这个正则的各个部分，方便你理解和后续调整：

• <p>：精准匹配<p>起始标签
• .*?：非贪婪模式匹配任意字符，这样会在遇到第一个</p>时就停止匹配，避免把多个<p>元素错误合并成一个
• <\/p>：匹配闭合的</p>标签（这里的/需要转义，不然会和正则的分隔符冲突）
• g：全局匹配标志，确保找到所有符合条件的<p>元素
• s：单行模式标志，让.可以匹配换行符，这样即使<p>内容里有换行也能正确识别

额外实用说明 #

1. 为什么不用split？因为你的需求本质是提取每个完整的<p>块，而不是按某个分隔符切割字符串，match()更贴合这个场景。
2. 原字符串末尾的多余</p>会被自动忽略，因为它没有对应的起始<p>标签，不会被正则匹配到，完美符合你的预期。
3. 如果你的HTML结构更复杂（比如<p>里嵌套其他标签），正则可能会失效，这时候建议用DOM解析的方式：创建一个临时DOM元素，把字符串插入后遍历子节点提取内容，但对于你给出的简单场景，这个正则完全够用。

内容的提问来源于stack exchange，提问作者Taha Md