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>