《VUE》搜索關鍵字高亮顯示

效果示例

 

// 第一種：篩選變色（推薦）

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

// 第二種：正則表達式

　　　　　　  KeyRegExp:function(val, keyword) {
                var Reg = new RegExp(keyword, 'i');
                if (val) {
                    return val.replace(Reg, `<span style="color: #f00;">${keyword}</span>`);
                }
            },

// 第三種：正則表達式（對於第二種的優化）

            keyRegExp:function (str,key){  // 搜索關鍵字高亮顯示
                // 正則匹配中文、英文關鍵字高亮，高亮后的關鍵字和之前的大小寫保持一致
                var key  = key;//這里定義關鍵詞
                key = '('+key.replace(/([\+\.\*\|\?\-\(\[\^\$])/g,'\\$1' ).replace(/\s+/g,'|')+')';//把匹配關鍵字中的正則符轉義
                var patt = new RegExp(key ,'igm'); //傳  igm  可避免關鍵詞后面的空格造成文字不匹配問題
                var str2 = str.replace(patt,"<span style='color:#f00;'>$1</span>");
                return str2;
            },

 

使用方法

<p v-html="keyRegExp(需要篩選的字符串,關鍵字)"></p>

 

 // 第四種：js的slice裁剪（不建議）

<p class="text" v-if="picked=='ap'" @click="listFn(item,'ap')">
    <span>{{item.ap.slice(0,item.ap.toLowerCase().indexOf(apVal.toLowerCase()))}}</span>
    <span style="color:#f00">{{item.ap.slice(item.ap.toLowerCase().indexOf(apVal.toLowerCase()),item.ap.toLowerCase().indexOf(apVal.toLowerCase())+apVal.length)}}</span>
    <span>{{item.ap.substr(item.ap.toLowerCase().indexOf(apVal.toLowerCase())+apVal.length)}}</span>
</p>

 

 

四種方法的優缺點

第一種篩選：可以正常篩選出關鍵字，空格篩選不出來

第二種正則：可以篩選出關鍵字，但是不支持中英文小括號和空格，並且英文小括號會報錯

第三種正則：可以篩選出關鍵字，支持中文小括號，關鍵詞后面添加空格也不影響篩選，但是也不支持英文小括號，並且英文小括號會報錯

第四種：如果是正常輸入是能夠篩選出來的，但是二次輸入或者添加空格會產生不友好的渲染（請求沒有回來之前），自己沒事可以感受一下

 

報錯實例