如何用正则表达式优雅地合并相邻重复的标签-html教程-PHP中文网

如何用正则表达式优雅地合并相邻重复的 <br /> 标签标签 " />

本文介绍一种简洁可靠的正则方案，将文本中连续出现的多个（含空行）压缩为单个，避免硬编码循环替换，同时兼容 HTML 实体、空白符及换行变体。

本文介绍一种简洁可靠的正则方案，将文本中连续出现的多个 `
`（含空行）压缩为单个 `
`，避免硬编码循环替换，同时兼容 html 实体、空白符及换行变体。

在处理用户输入或模板生成的 HTML 片段时，频繁的字符串替换（如删除关键词后插入）极易导致标签成簇堆积，产生大量冗余空行。例如：

<br>
Value

<br><br>
Value

<br><br>
Value

目标是将其规范化为仅保留值之间一个 的干净结构：

<br>
Value
<br>
Value
<br>
Value

✅ 推荐解决方案：单行正则 + 全局替换

使用以下正则表达式即可一步解决所有变体（支持、、、含空格/换行/制表符的版本）：

mystring = mystring.replace(/(<br>\s*){2,}/gi, '<br>\n');

( \s*)：匹配任意形式的标签及其后可选空白（空格、换行、制表符）；
{2,}：要求该模式连续出现 2 次及以上；
gi：全局（g）+ 不区分大小写（i），确保或同样生效；
替换为 ' \n'：统一标准化为带空格的自闭合标签 + 换行，语义清晰且利于后续阅读。

? 补充说明：若需更严格保留原始格式（如原为就不强制加空格），可用 '' 作为替换项，配合捕获组实现“保留首个，删掉其余”。

微知写作
一款AI数据处理工具，主要用于基于大数据的AI写作分析与热点洞察平台，适合需要提升相关任务效率的用户。

下载

?️ 集成到你的清理函数中（优化版）

将该正则直接插入你原有逻辑末尾，在所有替换操作完成后、输出前执行：

function textareadValue() {
  let mystring = document.getElementById("myTextArea").value;

  const find1 = ["DEER", "ELK", "PANDA", "THUNDERBIRD", "Text for DELETE 1", /* ... */];
  const find3 = ["REPLACE THIS TEXT 1", "REPLACE THIS TEXT 2", /* ... */];
  const replace3 = ["TEXT REPLACED 1", "TEXT REPLACED 2", /* ... */];
  const find2 = /(\d{4})/g;
  const replace = "<br>";

  // 步骤1：批量删除关键词
  find1.forEach(keyword => {
    mystring = mystring.replace(new RegExp(keyword, "g"), "");
  });

  // 步骤2：批量替换关键词（注意：此处原代码有 bug —— i 超出 find3 长度！已修复）
  find3.forEach((oldStr, i) => {
    mystring = mystring.replace(new RegExp(oldStr, "g"), replace3[i] || oldStr);
  });

  // 步骤3：年份 → <br>
  mystring = mystring.replace(find2, replace);

  // ✅ 步骤4：关键修复 —— 合并冗余 <br>（核心！）
  mystring = mystring.replace(/(<br>\s*){2,}/gi, '<br>\n');

  // 可选：进一步清理首尾多余换行，提升可读性
  mystring = mystring.trim().replace(/\n\s*\n/g, '\n\n');

  document.getElementById('result').innerHTML = mystring;
  console.log(mystring);
}