Why using RegExp to remove class from the class name?-CodePudding

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.

CodePudding user response：

Because you could have a class that contains the specified class as a substring.

Suppose you have an element with and you want to remove abc. Your code will replace the first abc, so it will change to instead of .

CodePudding user response：

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:

Either the beginning of the string or a word break, followed by "class-a".
"class-b" followed by either a word break or the end of the string.

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(' ');
}