javascript - 原生JS封装removeClass()方法遇到正则不能传参？

Question

代码如下：

function removeClass(element, className) {
  element.className = element.className.replace(/(?:^|\s)className(?!\S)/g, '');
}

问题1：正则里面className直接解析成字符串了，而不是传入的参数。
问题2：如何修改成像jQuery一样用element.removeClass(className)调用？

谢谢~

有人能说一下问题2的思路吗？-.-!

Answer 1

楼主这样是直接新建了一个匹配className这个字符串本身的正则表达式

如果要通过变量新建正则表达式应该这样

function removeClass(element, className) {
  element.className
     = element.className
         .replace(new RegExp("\(\?:^|\\s)"+className+"(?!\\S\)", 'g'),"");
}

这种方法会在某种情况下出现意料之外的结果,例如

<p class="a b c"></p>

removeClass(p,"a c") //fail or unexpected

替换className最好的轮子个人认为大概是这样(仍有不完善的地方)。

function removeClass(element, className) {
    let targetClassNames = className.split(" ");
    let classNames = element.className.split(" ");
    return element.className = classNames
        .filter(className=>targetClassNames.indexOf(className)<0).join(" ");
}

function addClass(element, className) {
    let targetClassNames = className.split(" ");
    let classNames = element.className.split(" ");
    targetClassNames.filter(className=>classNames.indexOf(className)<0);
    return element.className = classNames.concat(targetClassNames).join(" "));
}