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

Question

我正在开发一个目前无法拥有任何 3rd 方 JS 库的项目（否则使用 jQuery 会轻而易举）。这个项目中的一件事是表单验证。除了我的正则表达式有一些小问题外，我的工作相当不错。

我正在触发文本字段的验证函数 onchange()，因此，如果您退出并且出现错误，您会立即知道。使用良好的数据进行标记，您也会立即知道。如果验证失败，我将 error 类分配给父元素。如果您只进行一次验证，则此方法可以正常工作。如果您一直未能通过测试，则会累积错误类，例如，如果您未能通过 2 次验证，您最终会得到：

<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

它在全局范围内工作，但是当找到匹配时，下一个尝试的匹配从上一个匹配中最后一个字符之后的字符开始，即第二个 error 中的 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，它不匹配任何字符，因此下一个匹配将在前一个 error 匹配中的最后一个 r 字符之后开始。

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

---

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