I am studying the code at https://youmightnotneedjquery.com/#remove_class:
if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
I just wonder why it bother to use RegExp to perform the replacement? Why don't use a more simple version, like below:
if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(className, ' ');
Update I think the first version has a bug. HTML class name is case sensitive, see Are class names in CSS selectors case sensitive?, so flag 'i' should not be used in the RegExp.
Because you could have a class that contains the specified class as a substring.
Suppose you have an element with class="abc1 abc" and you want to remove abc. Your code will replace the first abc, so it will change to class="1 abc" instead of class="abc1".
It doesn't look like a good approach, either in general or in that particular example.
That regular expression seems to be intended to allow strings that are a space-separated list of class names to be passed, instead of separate strings like you would do with HTMLElement.classList.remove(). If you try to pass a string containing a space to HTMLElement.classList.remove() it will throw a DOMException.
I don't think the regular expression approach you found on that website would work as it's intended to. Let's take a look of a couple of example input strings, and the resulting regular expressions:
string: 'class-a'
regex: /(^|\b)class-a(\b|$)/gi
This regular expression is pretty clear, it's looking first for either the beginning of the string or a word break, then for the string "class-a", then for either a word break or the end of the string.
Because the line of code contains className.split(' '), it looks like it's intended to handle strings containing space characters. Like this:
string: 'class-a class-b'
regex: /(^|\b)class-a|class-b(\b|$)/gi
However, because it doesn't wrap the class name section of the regular expression in brackets to create its own group, it ends up being the above. That regular expression is split down the middle by that | character, and it looks for two things to match:
That means it would match classes it shouldn't for a classList like class-a2 thisclass-b.
There's another couple of issues as well. CSS classes are case sensitive, so it doesn't make sense to use a case insensitive regular expression. Also, the regular expression is trying to use \b to detect the beginning or end of a CSS class name, but \b will also match boundaries between letters and hyphens, so the string 'class-a-1' would match the regular expression /(^|\b)class-a(\b|$)/.
Instead, you'd do better by converting your element's classList string into an array of individual classes using split(' '), then find your class in that array of strings and remove it using something like Array.prototype.splice, then rejoin the array back into a classList string and overwrite the old one. Something like this:
if (el.classList) {
el.classList.remove(className);
} else {
let classes = el.className.split(' ');
let classIndex = classes.indexOf(className);
if (classIndex !== -1) {
classes.splice(classIndex, 1);
}
el.className = classes.join(' ');
}