JavaScript正则表达式：提取仅含<br>标签的div内容

当然可以直接用正则实现你的需求，不用绕“替换-匹配-还原”那一步！咱们直接针对需求写精准的正则，也完全不用前瞻后顾语法。

直接正则匹配方案 #

你的核心需求是：匹配的<div>标签内，只能包含普通文本和<br>标签（转义后的<br>），不能有其他HTML标签。对应的正则表达式如下：

const regex = /<div>(?:[^<>]|<br>)*<\/div>/g;

正则说明： #

• <div>：精准匹配转义后的div起始标签
• (?:[^<>]|<br>)*：非捕获组，用来匹配div内部的合法内容：
  • [^<>]：匹配任何不是<或>的字符（也就是普通文本内容）
  • |<br>：或者匹配转义后的<br>标签
  • *：允许上述内容出现0次或多次（覆盖空div、纯文本div、带br的div等情况）
• </div>：匹配转义后的div结束标签

测试示例 #

用你给出的输入字符串测试：

const str = "abcd <div>div</div> abcd <div>div with <br> content</div> <div>invalid with <p>tag</div>";
const matches = str.match(regex);
console.log(matches);
// 输出：["<div>div</div>", "<div>div with <br> content</div>"]

可以看到，包含<p>标签的无效div被自动排除了，完全符合需求。

更稳妥的DOM解析方案 #

如果你的应用场景涉及复杂的HTML（比如存在<br />自闭合标签、大小写混合的<BR>标签，或者需要处理嵌套结构），正则可能会有局限性，这时候用DOM解析会更可靠：

const str = "abcd <div>div</div> abcd <div>div with <br> content</div>";
// 1. 先把转义的HTML实体还原成真实标签
const tempContainer = document.createElement('div');
tempContainer.innerHTML = str;

// 2. 筛选符合条件的div：子元素仅为文本节点或br标签
const validDivs = Array.from(tempContainer.querySelectorAll('div')).filter(div => {
  return Array.from(div.childNodes).every(node => {
    return node.nodeType === Node.TEXT_NODE || (node.tagName && node.tagName.toLowerCase() === 'br');
  });
});

// 3. 提取目标内容（如果需要转回实体编码，可以用额外处理）
const results = validDivs.map(div => div.outerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
console.log(results);

这种方法能处理各种HTML的合法写法，容错性更强。

对比你的原始方案 #

你之前想到的“替换br-匹配-还原”方案是可行的，但直接用上述正则会更简洁，减少了字符串替换的额外步骤，性能和可读性都更好。

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