使用正则表达式修复HTML标签内的多余空格问题

可以通过几个精准的正则表达式分步骤处理，既能清理标签内的多余空格，又不会破坏文本内容里带空格的<或>符号：

处理步骤及正则说明 #

• 清理开始标签<与标签名之间的空格
  匹配<后紧跟空格+标签名的情况，移除空格：

  html = html.replace(/<\s+([a-z][a-z0-9]*)/gi, '<$1');
  

  例如将< div转换为<div，< b转换为<b。

• 清理结束标签</与标签名之间的空格
  匹配</后紧跟空格+标签名的情况，移除空格：

  html = html.replace(/<\/\s+([a-z][a-z0-9]*)/gi, '</$1');
  

  例如将</ b转换为</b，< / div转换为</div。

• 清理标签结尾>前的多余空格
  匹配非空白字符后紧跟空格+>的场景（避免误匹配文本里的1 > 0这类内容），移除空格：

  html = html.replace(/(\S)\s+>/g, '$1>');
  

  例如将class='test' >转换为class='test'>，< / div >末尾的 >转换为>。

完整示例 #

以你提供的无效HTML为例：

< div class='test' >1 > 0 is < b >true</ b> and apples >>> bananas< / div >

运行以下代码：

let invalidHtml = "< div class='test' >1 > 0 is < b >true</ b> and apples >>> bananas< / div >";

// 步骤1：清理开始标签<与标签名间的空格
invalidHtml = invalidHtml.replace(/<\s+([a-z][a-z0-9]*)/gi, '<$1');
// 步骤2：清理结束标签</与标签名间的空格
invalidHtml = invalidHtml.replace(/<\/\s+([a-z][a-z0-9]*)/gi, '</$1');
// 步骤3：清理标签结尾>前的空格
invalidHtml = invalidHtml.replace(/(\S)\s+>/g, '$1>');

console.log(invalidHtml);

输出结果：

<div class='test'>1 > 0 is <b>true</b> and apples >>> bananas</div>

该结果完全符合有效格式要求，同时保留了文本内容里带空格的符号。

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