无需DOM解析器匹配所有div标签的正则问题及动态正则需求

一、解决匹配多个div的错误：正确的div标签正则 #

之前出现一次匹配多个div的问题，核心原因是正则默认的贪婪匹配会从第一个<div>一直匹配到最后一个</div>。要解决这个问题，需要开启非贪婪模式，并完善标签匹配的边界处理：

匹配普通闭合div标签的正则 #

// 匹配所有<div>...</div>格式的标签，支持带属性、忽略大小写
const divRegex = /<div\b[^>]*>([\s\S]*?)<\/div\s*>/gi;

正则解释 #

• <div\b：用\b（单词边界）确保匹配独立的<div标签，避免误匹配<divider这类包含div的标签
• [^>]*：匹配标签内的任意属性内容（所有非>的字符）
• ([\s\S]*?)：[\s\S]匹配所有字符（包括换行），?开启非贪婪模式，确保匹配到最近的</div>就停止
• <\/div\s*>：匹配闭合标签，\s*允许标签末尾有空格（比如</div >）
• gi：全局匹配（g）+ 不区分大小写（i），适配HTML标签大小写不敏感的特性

支持自闭合div标签的扩展正则 #

如果需要同时匹配自闭合的<div/>标签，可以调整为：

const divRegex = /<div\b[^>]*?(?:\/>|>([\s\S]*?)<\/div\s*>)/gi;

二、动态生成匹配任意标签的正则 #

要实现用变量替换div以匹配任意指定标签，可以通过RegExp构造函数动态生成正则，同时要做标签名合法性校验避免正则注入：

动态正则生成函数 #

function createTagRegex(tagName) {
  // 校验标签名合法性：必须以字母开头，允许字母、数字、下划线、连字符
  if (!/^[a-zA-Z][a-zA-Z0-9-_]*$/.test(tagName)) {
    throw new Error('标签名不合法，请输入符合HTML规范的标签名');
  }
  // 动态生成正则，注意字符串中反斜杠需要转义（写成\\）
  return new RegExp(`<${tagName}\\b[^>]*?(?:\\/>|>([\\s\\S]*?)<\\/${tagName}\\s*>)`, 'gi');
}

使用示例 #

// 生成匹配p标签的正则
const pRegex = createTagRegex('p');
// 生成匹配span标签的正则
const spanRegex = createTagRegex('span');

// 测试匹配
const html = '<p>段落1</p><span class="test">文本</span><div/>';
console.log(html.match(pRegex)); // ["<p>段落1</p>"]
console.log(html.match(spanRegex)); // ["<span class=\"test\">文本</span>"]

三、重要局限性说明 #

正则表达式本质是有限状态机，无法处理HTML的嵌套标签递归结构。比如面对<div>外层<div>内层</div></div>这类嵌套代码，正则会错误地将<div>外层<div>内层</div>作为一个匹配结果，而漏掉外层的闭合标签。如果你的HTML存在复杂嵌套场景，即使优化正则也难以做到完全准确匹配。

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