javascript - 正则表达式 - new RegExp() 全局搜索/替换字符串

Question

我正在开发一个项目，目前无法拥有任何第 3 方 JS 库(否则使用 jQuery 就轻而易举了)。该项目中的一件事是表单验证。除了我的正则表达式有一些小问题之外，我的工作得相当好。

我正在触发文本字段的验证函数 onchange()，因此如果您退出并出现错误，您会立即知道。标出良好的数据，您也会立即知道。如果验证失败，我会将 error 类分配给父元素。如果您只验证一次，那么这很有效。如果您一直未能通过测试，错误类就会累积，例如，如果您两次未能通过验证，您最终将得到:

<p class=" error">

如果你失败了 3 次，你最终会得到:

<p class=" error error">

如果验证通过，我将调用下面的removeClass() 函数。基本上，看起来我没有进行全局搜索/替换。我确信添加全局修饰符可以解决上面的情况，但事实并非如此，它只删除了一个“错误”类。

removeClass: function (el, name) {
    var regex = new RegExp('(^|\\s)' + name + '(\\s|$)', 'gi');
    el.className = el.className.replace(regex, ' ');
}

我的正则表达式只是寻找行首或空格，后跟“错误”，后跟空格或行尾。诚然，我确实不擅长正则表达式:)

有什么事情让你感到惊讶吗？

Answer 1

它在全局范围内工作，但是当找到匹配项时，下一个尝试的匹配将从上一个匹配中最后一个字符后面的字符开始，即第二个 错误中的 e 而不是前面的空格。

//  v-----v-------first match
   " error error"
//         ^------continues here, no more matches because 
//                       there isn't a space before `e`.

要测试它，请在两个类之间添加第二个空格，它将起作用。

//  v-----v-------first match
   " error  error"
//         ^------continues here, and now it will match 

修复方法是使用 \\b 代替，它不匹配任何字符，因此下一个匹配将从上一个匹配的最后一个 r 字符之后开始错误匹配。

new RegExp('\\b' + name + '\\b', 'gi');

---

正如 @Joseph 所指出的，您应该将.replace()中的""更改为空字符串""以避免空格字符的累积。