vue联想词飘红

• • • 要求
    • 代码
    • ps

要求

不对输入字段进行任何处理，对输入字段按字符匹配，不区分英文大小写。

代码

   const charReg = /[\[\]\\]/gi; //替换需要转义的字符（这些字符在正则中代表特殊含义）
        const newText = searchKey.value.replace(charReg, '\\$&')//把输入中需要转义的字符替换（替换后正则规则就匹配原有字符本身）
        const reg = new RegExp(`[${newText}]`, 'gi');//把替换后的字符串在[]中，匹配规则代表只要匹配到[]中任意一个字符
        const html = text.replace(reg, "<span style='color: #ff3131'>$&</span>") //进行替换，gi会替换所有符合规则的字符，并且不区分大小写
        return html; //vue中使用v-html 来使用

ps

搜索联想词记得使用防抖，@input时会频繁请求。