全局字符串替换RegExp不会删除所有匹配项

Question

I'm creating some small add/remove/toggle/has class functions, they all work really well, until I've got multiple instances of the same class name value on a class.

Here's where I'm at so far, you'll see I have the 'g' flag in my removeClass Regexp:

Element.prototype.hasClass = function (className) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(this.className);
};

Element.prototype.addClass = function (className) {
    if (!this.hasClass(className)) {
        this.className += ' ' + className;
    }
};

Element.prototype.removeClass = function (className) {
    if (this.hasClass(className)) {
        this.className = this.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');
    }
};

Element.prototype.toggleClass = function (className) {
    if (this.hasClass(className)) {
        this.removeClass(className);
    } else {
        this.addClass(className);
    }
};

The starting HTML:

<p class=" james james dean james james james">Hello</p>

When rendered:

<p class=" james dean james">Hello</p>

Here's my working jsFiddle, if you inspect element you can see not all james instances have been removed. Can anyone shed light as to what I'm doing wrong? Thanks in advance :) http://jsfiddle.net/8urPs/

Answer 1

You're expecting the class string to always be surrounded by white-space. Once a white-space is matched it can't be matched again. So if there are two james classes standing next to each other and separated by one white-space, the first james will match and steal the white-space. Then the second james won't match.
To resolve the problem add * after each bracket. It stands for zero or more of the preceding element .

new RegExp('(\\s|^) ' + className + '(\\s|$) ', 'g')

Here's your update fiddle: http://jsfiddle.net/8urPs/1/

Update

According to your comment about multiple white-spaces - the problem was the replacement value. In the first approach I left it unchanged - $2 . Actually, we don't need any content in the replacement, so we can simply change it to an empty string

this.className = this.className.replace(new RegExp('(\\s|^)*' + className + '(\\s|$)*', 'g'), '');

Here's the corrected fiddle: http://jsfiddle.net/8urPs/2/

Answer 2

You have a problem with overlapping expressions. You are replacing james ; however, in james james , the middle space is shared, and regexps won't match overlapping spans.

Rewrite to either use word boundaries ( \\b ) instead of spaces and beg/end, or with lookahead so as not to consume that space.

Answer 3

It is because the spaces between the class names can only be part of a single match. To fix this, you can replace the final capturing group with a positive lookaheaed, like so:

Element.prototype.removeClass = function (className) {
    if (this.hasClass(className)) {
        this.className = this.className.replace(new RegExp('(\\s|^)' + className + '(?=\\s|$)', 'g'), '');
    }
};

Answer 4

White space after className is always matched, and then cannot be matched again. Using positive lookahead assertion can help you with that:

this.className = this.className.replace(new RegExp('(\\s|^)' + className + '(?=\\s|$)', 'g'), '');

When you start capture group with ?= then it is trated as assertion and not matched.

Working sample: http://jsfiddle.net/ah3Ge/