使用Javascript判断元素中是否含有某个样式

tip：引入了Moment.js格式化前端页面显示时间

假设我们有如下元素

<div id="LL" class="a b hello-world"></div>

1.简单正则匹配法
即使用正则判断单词边界的方式判断是否存在className

function hasClass(element,className){
        const regExp = new RegExp("\\b" + className + "\\b","gi");
        return regExp.test(element.className);
    }
    const LL = document.getElementById('LL');
    console.log(hasClass(LL,'a'));                                                  //..true
    console.log(hasClass(LL,'b'));                                                  //..true
    console.log(hasClass(LL,'hello-world'));                                    //..true
    console.log(hasClass(LL,'hello'));                                              //..true
    console.log(hasClass(LL,'world'));                                              //..true

在样式的名字为hello-world之类的带有-连接符的情况，测试hello和world都会返回true，这并不满足我们的预期。

2.IndexOf方法
也会导致这样的问题

 function hasClass(element,className){
        return element.className.indexOf(className) > -1;
    }
    const LL = document.getElementById('LL');
    console.log(hasClass(LL,'a'));                                                  //..true
    console.log(hasClass(LL,'b'));                                                  //..true
    console.log(hasClass(LL,'hello-world'));                                    //..true
    console.log(hasClass(LL,'hello'));                                              //..true
    console.log(hasClass(LL,'world'));                                              //..true
    console.log(hasClass(LL,'h'));                                              //..true
    console.log(hasClass(LL,'e'));                                              //..true
    console.log(hasClass(LL,'l'));                                              //..true

这时候，不仅hello和world返回true，h/e/l/等单个字符都会返回true
我们改进一下方法：

function hasClass(element,className){
        return (" "+element.className + "  ").indexOf(" " + className + " ") > -1;
    }
    const LL = document.getElementById('LL');
    console.log(hasClass(LL,'a'));                                                  //..true
    console.log(hasClass(LL,'b'));                                                  //..true
    console.log(hasClass(LL,'hello-world'));                                    //..true
    console.log(hasClass(LL,'hello'));                                              //..false
    console.log(hasClass(LL,'world'));                                              //..false
    console.log(hasClass(LL,'h'));                                              //..false
    console.log(hasClass(LL,'e'));                                              //..false
    console.log(hasClass(LL,'l'));                                              //..false

现在根据样式名称加” “的方式，判断一个元素是否含有该样式。在大部分的测试中，已经没有了问题。
但是！！！我们遇到这样的神奇代码

<div id="LL" class="a   b  hello-world"></div>

思路：根据className匹配元素数组，然后查找其中是否含有对应的元素

<div id="LL" class="a b hello-world"></div>

<script>
    function hasClass(element,className){
        var aSameClassEle = document.getElementsByClassName(className);
        for(var i = 0;i < aSameClassEle.length;i++){
            if(aSameClassEle[i] === element){
                return true;
            }
        }
        return false;
    }
    let obj = document.getElementById("LL");
    console.log(hasClass(obj,'a'));                                                 //..true
    console.log(hasClass(obj,'c'));                                                 //..false
</script>