如何使用正则去掉html中标签与标签之间的空格

文庆反射一招轻

要使用正则表达式去除 HTML 标签之间多余的空格，需要考虑几种情况：

• 多个空格压缩成一个空格: 这可以使用 \s+ 匹配一个或多个空格字符，并将其替换为单个空格。

• 标签之间的换行符: 换行符也应该被考虑在内，可以使用 \s+ 来匹配，因为它包含了换行符。

• 避免移除 <pre> 标签内的空格: <pre> 标签内的空格和换行符是有意义的，不应该被移除。 我们需要排除这种情况。

• 标签内的空格: 虽然题目要求是标签之间，但标签内的空格有时也需要处理。

以下提供几种 JavaScript 正则表达式解决方案，并解释其优缺点：

方法一：简单替换 (不推荐)

htmlString = htmlString.replace(/>\s+</g, '><');

这个方法最简单，直接替换 > 和 < 之间的空格。但是，它无法处理 <pre> 标签，并且如果标签之间没有空格，它不会添加空格，这可能会导致布局问题。

方法二：更全面的替换 (推荐)

function removeSpacesBetweenTags(htmlString) {
  return htmlString.replace(/(<pre.*?>[\s\S]*?<\/pre>)|(?:>)\s+(?=<)/g, function(match, preBlock) {
    if (preBlock) {
      return preBlock; // 保留 <pre> 块的内容
    } else {
      return '>'; // 将其他标签间的多个空格替换为单个空格（实际上是去除了空格，并在替换时添加了 > 符号，实现了紧凑排列）
    }
  });
}
let html = "<div>  hello  </div><pre>  code  </pre><p> world </p>";
let result = removeSpacesBetweenTags(html);
console.log(result); // 输出: <div>hello</div><pre>  code  </pre><p>world</p>

这个方法使用了捕获组和回调函数。

• (<pre.*?>[\s\S]*?<\/pre>) 匹配 <pre> 标签及其内容，并将其捕获到第一个捕获组 preBlock 中。
• (?:>)\s+(?=<) 匹配 > 后面的一个或多个空格，但不包括 > 在捕获组中。(?=<) 是一个正向先行断言，确保匹配的空格后面跟着一个 <。
• 回调函数检查 preBlock 是否存在。如果存在，则返回 preBlock，保留 <pre> 块的内容。否则，返回 >，有效地去除标签之间的空格。

方法三：更精细的控制空格数量 (推荐)

function removeSpacesBetweenTags(htmlString, replacement = "") {
  return htmlString.replace(/(<pre.*?>[\s\S]*?<\/pre>)|(?:>)\s+(?=<)/g, function(match, preBlock) {
    if (preBlock) {
      return preBlock; // 保留 <pre> 块的内容
    } else {
      return `>${replacement}`; // 使用 replacement 替换标签间的空格
    }
  });
}
let html = "<div>  hello  </div><pre>  code  </pre><p> world </p>";
let result = removeSpacesBetweenTags(html, " "); // 保留一个空格
console.log(result); // 输出: <div> hello </div><pre>  code  </pre><p> world </p>
let result2 = removeSpacesBetweenTags(html); // 不保留空格
console.log(result2); // 输出: <div>hello</div><pre>  code  </pre><p>world</p>

这个方法在方法二的基础上增加了 replacement 参数，可以更精细地控制标签之间保留的空格数量。

选择哪种方法取决于你的具体需求。如果需要处理 <pre> 标签，方法二或三是更好的选择。 方法三提供了更灵活的控制，允许你指定替换的字符串，例如单个空格或其他字符。

希望这些信息能帮到你!