原生JavaScript关键词高亮实现
关键词高亮效果的原生 JavaScript 实现，真的是前端开发里一个挺实用的小技巧。页面搜索结果页、文章关键词提示、后台管理系统里，经常用得上。原生 JavaScript实现，不依赖任何库，加载快，兼容性还不错。
核心思路就是用innerHTML把关键词包上一层，再配上点样式。比如想高亮显示“前端”，可以这样：
text[removed] = text[removed].replace(/(前端)/g, '$1');再配个样式：.highlight { background-color: yellow; }，效果就出来了。
了，如果你关键词比较多，或者来自后端的输入，记得先做下HTML 转义，避免 XSS 漏洞。这个技巧简单、灵活、扩展性强，自己封装成一个函数用起来也方便。
如果你正在做搜索页面、内容管理系统，或者只是想练练原生 JS，推荐你看下这篇文章：
原生 JavaScript 关键词高亮效果，代码清晰，思路明了，学起来不费劲。
文件大小：10.44KB
评论区