标签：字符 vue const 飘红 联想 html 替换 gi

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时会频繁请求。

标签：字符,vue,const,飘红,联想,html,替换,gi
来源： https://blog.csdn.net/qq_39692513/article/details/123084736

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。