原生JavaScript关键词高亮效果
搜索结果里的高亮文字效果，用原生 JavaScript 就能搞定，不用依赖任何库，比较轻量也挺灵活。像百度搜索出来关键词变红的效果，这个方法就能实现，而且代码也挺好懂，适合直接嵌入项目里。
用正则匹配的方式，把目标关键词包在一个带样式的里，这样浏览器就能显示高亮了。比如要把“JavaScript”变成红色，只要一行代码搞定。响应也快，用户体验还不错。
逻辑其实简单：先拿到文本内容，再用replace目标关键词。需要注意的是，别忘了转义特殊字符，像(、)这种，否则正则会出错。
样式方面你可以自定义，比如设置color: red，也可以加粗、加背景色。完全看你项目风格怎么搭。嗯，用的时候记得兼容大小写，用户输入的不一定规矩。
如果你也在做搜索、筛选、关键词提取这种功能，可以参考这个小技巧，简单实用，随用随贴上。相关的字符串工具和优化策略也可以顺带看看，链接都给你备好了。
文件大小：3.38KB
评论区