搜尋框輸入文字查詢資料，需要比對文字高亮顯示

移動端開發經常遇到在搜尋框輸入文字查詢資料，為提高易用性，需要比對文字高亮顯示，

一、不區分大小寫

brightenKeyword(val, keyword) {
        val = val + '';
       if (val.indexOf(keyword) !== -1 && keyword !== '') {
          return val.replace(keyword, '<font color="#248adf">' + keyword + '</font>')
        } else {
          return val;
        }
        },
           

同樣有些情況需要做到，在搜尋輸入時是忽略字母大小寫的情況，那麼高亮顯示也需要忽略大小寫

二、應用正規表達式，區分大小寫

brightenKeyword(val, keyword) {
        var thizz = this
        val = val + '';
        const Reg = new RegExp(keyword, 'i')
        if (val) {
            // 這裡為什麼使用$&不使用keyword，因為這裡使用正規表達式不區分大小寫，如果是文本時大寫，搜尋的關鍵字是小寫也是會被比對的，這樣比對替換掉的話，文本内的文字會被替換成搜尋的keyword，也就是改成了小寫，這樣不太合理
            // const resCurrent = val.replace(Reg, `<span style="color: #000;background-color: orange;">${keyword}</span>`)
            const resCurrent = val.replace(Reg, `<span style="color: #248adf;background-color: white;">$&</span>`)
            return resCurrent
          
        }
        },