FckSignups 关键词高亮原理全解析正则表达式如何标记搜索匹配词【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignups在 FckSignups原名 FckSignups现名 NoSignups这个免注册开源工具目录中关键词高亮是搜索体验的核心细节输入搜索词后命中的工具名称、描述和标签里对应文字会被荧光笔般标出来。本文带你拆解这套正则表达式高亮原理——从搜索词分词到mark标签落地只需理解 3 个步骤。一、高亮生效的完整链路整个搜索高亮链路非常短共 4 站搜索框输入页面顶部的搜索输入框位于 ToolFilters.tsx每次键入都会触发查询更新。搜索词分词useTools.ts 中的tokenize把查询串拆成小写关键词数组。正则匹配 包裹highlightMatches 用正则把文本切分命中片段包进mark标签。渲染高亮工具卡片在渲染名称、描述、标签时分别调用该函数例如 ToolCard.tsx 中的highlightMatches(tool.name, searchKeywords)。二、核心拆解正则表达式如何标记匹配词 高亮的全部逻辑集中在 highlight.tsx不到 30 行分为三步。1. 转义关键词防止正则注入用户搜索词里可能包含.、*、、(这类正则特殊字符比如搜C或a.b。若不处理它们会被当作量词、分组等语法解析导致匹配错乱。因此 escapeRegExp 函数 会对每个关键词中的特殊字符统一加\转义把搜索词变成纯文本字面量让正则只按字面意思匹配。 一句话总结先消毒再入正则——这是安全构造正则的关键习惯。2. 用「或」模式拼接多个关键词所有关键词转义后用|或运算拼接成一个模式再交给new RegExp例如搜索video editor会生成(video|editor)关键在两个标志位highlight.tsx 第14行gglobal匹配文本中所有出现位置而不是只找到第一个就停。iignore case忽略大小写Editor、EDITOR都能命中editor。3. split 切分 mark包裹高亮的精髓 ✨这里没有用replace而是一个经典技巧——用带捕获组的正则执行text.split(pattern)第15行。JavaScript 中split遇到含捕获组的正则时捕获到的匹配内容也会保留在结果数组里。例如对Video Editor Tool按(video|editor)切分得到[, Video, , Editor, Tool]随后对数组逐项判断某一段转小写后如果正好等于某个关键词就用mark classkeyword-highlight包裹否则原样输出第19-27行。渲染出来就是markVideo/mark markEditor/mark Tool浏览器原生支持mark标签再配合样式就得到了醒目的黄色高亮效果。三、搜索词怎么分词与高亮规则如何保持一致 搜索词并不是整句参与匹配的而是先被拆词。tokenize 函数 的逻辑全部转小写按「非字母数字、非」的字符空格、连字符、下划线等切开过滤掉空串。所以video-editor、Video Editor、video_editor三种写法最终都得到[video, editor]。这也解释了为什么代码里保留——搜索C这类词不会被切散。与之配套的是 matchScore 评分函数它统计有多少个关键词出现在工具的名称、描述或标签中。只有全部关键词都命中的工具才会保留在结果里而高亮使用的正是同一份关键词数组——这就是源码注释所说的与搜索评分规则一致highlight.tsx 第8-10行。四、两个值得学习的设计细节设计点做法收益子串匹配关键词按子串匹配editor可命中video-editor高亮规则与搜索规则一致看到什么就搜到什么性能短路关键词为空、文本为空、切分后仍只有 1 段时直接原样返回第12、16行无搜索时零开销避免无谓的正则构造五、核心文件速查 文件作用src/utils/highlight.tsx高亮核心转义、正则构造、split 切分、mark包裹src/hooks/useTools.ts搜索词分词与匹配评分src/components/Home/Tools/ToolCard/ToolCard.tsx卡片中名称、描述、标签的高亮渲染src/components/Home/ToolFilters/ToolFilters.tsx搜索输入框搜索的起点README.md项目理念、工具数据格式与分类说明小结FckSignups 的关键词高亮是一套极简而完整的设计转义防注入 →|或模式 gi标志 → split 切分 →mark包裹四步走完全程。它的子串 忽略大小写规则同时服务于搜索过滤和结果高亮让用户在列表里看到的高亮词与自己的搜索词严格对应。这套不到 30 行的实现highlight.tsx是学习前端如何用正则做搜索高亮的优质范例。【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignups创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考