如何用JavaScript正则匹配末尾为HTML开放标签加非标签内容的字符串

问题排查 #

你写的代码存在三个核心错误：

• 字符组[^(xxx|yyy)]只能排除单个字符，无法排除「开放标签/闭合标签」这类连续字符串，属于核心逻辑错误。
• 调用escapeRegExp处理正则模板字符串，会把所有正则特殊字符转义为普通字符，导致整个匹配规则完全失效。
• anyOpenTag的正则写法有误，([^/>][^>])*的量词位置错误，无法匹配标签名只有1个字符的情况（比如<p>、<i>）。

正确实现方案 #

核心匹配逻辑：字符串末尾存在HTML开放标签，且该开放标签之后没有出现任何HTML闭合标签。
正则表达式：/<[a-z][^>]*>(?!.*<\/[a-z][^>]*>).*$/i

规则说明 #

• <[a-z][^>]*>：匹配合法HTML开放标签，支持带任意属性，忽略大小写
• (?!.*<\/[a-z][^>]*>)：负向前瞻断言，保证开放标签之后不存在任何闭合标签
• .*$：匹配开放标签后到字符串末尾的任意普通文本

JS代码实现 #

const checkEndWithOpenTag = (str) => {
  const regex = /<[a-z][^>]*>(?!.*<\/[a-z][^>]*>).*$/i;
  return regex.test(str);
}

// 测试用例
// 符合规则返回true
console.log(checkEndWithOpenTag('<div>some text here'));
console.log(checkEndWithOpenTag('<span>some text here'));
console.log(checkEndWithOpenTag('<div class="wrap">测试中文内容'));
// 不符合规则返回false
console.log(checkEndWithOpenTag('<div>some text here</div>'));
console.log(checkEndWithOpenTag('<h1>some text here</h1>'));

兼容自闭合标签调整 #

如果需要排除<img />、<br/>这类自闭合标签，只需要调整开放标签的匹配规则，修改正则为：
/<[a-z][^>]*[^/]>(?!.*<\/[a-z][^>]*>).*$/i

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