React JSX和正则表达式的神奇组合

前端开发中非常常见的场景当用户在搜索框输入关键词后页面中匹配到关键词的文本需要高亮展示。举个最直观的例子原始文本今天的天气不错用户搜索天很多人第一反应是对原始文本进行子串比对找到所有匹配关键词的位置然后将文本拆分成多个独立的片段再给匹配到的片段包裹上带高亮样式的容器。这种方法确实能实现效果但过程非常繁琐。既然是“处理字符串匹配”那自然会想到正则表达式。我们完全可以用极简的代码实现这个需求。不绕弯子直接上最终实现代码React场景// 核心代码仅1行JSX逻辑 text.split(new RegExp((${searchKey}), gi)).map((str, i) i % 2 ? span key{i} style{{ background: yellow }}{str}/span : str )正则表达式与split方法的结合new RegExp((${searchKey}), gi)这里有两个关键要点分组符 ()这是整个实现的“灵魂”。正常情况下split方法会根据匹配到的内容拆分字符串并丢弃匹配到的子串比如用“天”拆分“今天的天气不错”会得到[今, 的, 气不错]。但加上分组符后split会将匹配到的子串也保留在拆分后的数组中。所有匹配到的关键词“天”都在奇数索引位置索引1、3而其他非匹配文本都在偶数索引位置索引0、2、4。[今, 天, 的, 天, 气不错]修饰符 gig表示“全局匹配”i表示“忽略大小写”。JSX与map方法的结合实现高亮渲染这里JSX的特性功不可没——它可以和原生JavaScript代码无缝混写我们不需要额外的模板语法。JSX的便捷之处我在这篇文章中已有介绍Vue和React之争最后正则表达式中的分组符()还有很多实用用途比如捕获匹配内容、实现分组替换等以后有机会我再专门整理一篇文章详细讲解正则分组的各种用法。作者简介从事 Web 前后端开发多年。一直相信“技术应该被说人话”坚持输出实用易懂的干货内容。闲暇写些随笔记录行业观察与生活感悟。