vue2實現(xiàn)搜索結果中的搜索關鍵字高亮的代碼

來源：懂視網責編：小采時間：2020-11-27 22:08:53

vue2實現(xiàn)搜索結果中的搜索關鍵字高亮的代碼

vue2實現(xiàn)搜索結果中的搜索關鍵字高亮的代碼:具體代碼如下所示： // 篩選變色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color=#409EFF

推薦度：

點擊下載本文 文檔為doc格式

導讀vue2實現(xiàn)搜索結果中的搜索關鍵字高亮的代碼:具體代碼如下所示： // 篩選變色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color=#409EFF

具體代碼如下所示：

// 篩選變色
brightenKeyword(val, keyword) {
 val = val + '';
 if (val.indexOf(keyword) !== -1 && keyword !== '') {
 return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
 } else {
 return val
 }
}
// 或者用正則表達式
brightenKeyword(val, keyword) {
 const Reg = new RegExp(keyword, 'i');
 if (val) {
 return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`);
 }
}
// 使用方法
<el-table-column label="維護內容">
 <template slot-scope="scope">
 <span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
 </template>
</el-table-column>

開源項目地址： github.com/alex-0407/v…

效果演示