重复 javascript 替换直到没有更改？

Question

我有一个简短但复杂的正则表达式来修剪空格，而不管字符串中是否存在 html 标签。var text = "<span><span>ex ample </span> </span>";// trim from start; not relevant in this exampletext = text.replace(/^((<[^>]*>)*)\s+/g, "$1");// trim from endtext = text.replace(/\s+((<[^>]*>)*)$/g, "$1");console.log(text);<span><span>ex ample </span> </span>- 示例输入<span><span>ex ample</span></span>- 预期输出<span><span>ex ample </span></span>- 观察到的输出如何实现我的预期输出？我已经尝试添加/g标志，因为它应该匹配不止一次并且应该修复它（运行替换两次对示例有效）但它似乎根本没有重复任何内容。不管标签如何修剪字符串的替代方法也很受欢迎，因为这是我的主要目标。次要目标是了解为什么这不起作用。

Answer 1

序言：不要只是复制这个，读到最后。

从另一个角度思考 - 通过替换直到找不到匹配项而不是直到没有进行任何更改，这似乎很简单。

var text = "<span><span>ex ample </span> </span>";

var trim_start = /^((<[^>]*>)*)\s+/;

while(text.match(trim_start)) {

  text = text.replace(trim_start, "$1");

}

var trim_end = /\s+((<[^>]*>)*)$/;

while (text.match(trim_end)) {

  text = text.replace(trim_end, "$1");

}

console.log(text);

输出如预期 - 唯一的空间是 ex ample

但是如果替换可能不会改变任何东西，这就会有一个大问题。简单地更改\s+为\s*使其变成无限循环。所以，总而言之，它适用于我的情况，但并不健壮，要使用它，您必须完全确定每次替换都会在正则表达式匹配时改变某些内容。

Answer 2

您需要为标签添加一些含义，有些需要空格，有些不需要。

尝试这个：

text.replace(/\s*(<\/?(span|div)>)\s*/g, "$1")
    .trim()
    .replace(/\s+/g, ' ');

它：

• 替换标签“环绕”内容周围的空格

• 修剪全局字符串周围的空格

• 去除多余的空格

可以更改“周围”标签列表以包含诸如tr...

第 2 步和第 3 步可能会首先出现以加快速度。

试过：

var text = "<div> <i>ano</i>   <b>ther</b>  <span> <b>my</b>   <i>ex</i> <u> ample </u> </span> </div>";

先回答，再评论。

这个想法是删除之间的所有空格：

• 一个非空格字符和一个开始标签

• 一个结束标记和一个非空格字符

text.replace(/([^\s])\s*(<)/g, "$1$2")
    .replace(/([>])\s*([^\s])/g, "$1$2")
    .trim();