如何使用正则表达式高亮字符串块?双引号内文本高亮需求
实现双引号内指定单词的高亮功能
嘿,我来帮你搞定这个字符串高亮的需求!结合你提到的规则——包括双引号内范围、*截断符、?匹配单词加n字符的效果,我用JavaScript写了一套可行的实现方案,咱们一步步来看:
核心思路
- 先解析
wordsToHighlight参数,提取出要高亮的规则,处理*和?的特殊匹配逻辑 - 定位全文本中所有双引号包裹的内容,只在这些范围内应用高亮规则
- 将匹配到的目标内容替换为带高亮样式的标记(这里用HTML的span标签做示例,你可以根据场景调整)
代码实现
function highlightQuotedText(text, wordsToHighlight) { // 第一步:解析高亮规则 // 去掉首尾的双引号,再按逗号分割成单个规则 const rawRules = wordsToHighlight.replace(/^"|"$/g, '').split(/\s*,\s*/); // 把规则转换成正则表达式,处理*和?的特殊逻辑 const regexList = rawRules.map(rule => { // 先转义正则特殊字符,除了*和? let escapedRule = rule.replace(/[.+^${}()|[\]\\]/g, match => { return (match === '*' || match === '?') ? match : `\\${match}`; }); // * 作为截断符,替换成 .*(匹配任意长度的后续字符) escapedRule = escapedRule.replace(/\*/g, '.*'); // ? 代表匹配单词后加n个字符,每个?对应1个任意字符 escapedRule = escapedRule.replace(/\?/g, '.{1}'); // 返回全局不区分大小写的正则(需要区分大小写的话去掉i) return new RegExp(escapedRule, 'gi'); }); // 第二步:处理文本,只在双引号内高亮匹配内容 return text.replace(/"([^"]*)"/g, (fullMatch, quotedContent) => { let highlightedContent = quotedContent; // 对每个双引号内的内容应用所有高亮规则 regexList.forEach(regex => { highlightedContent = highlightedContent.replace(regex, '<span style="background-color: #ffff00;">$&</span>'); }); // 把高亮后的内容放回双引号中 return `"${highlightedContent}"`; }); } // 示例测试 const wordsToHighlight = '"ref*, serv?"'; const row = { "Abstract": "a reference I have a reference serv..." }; const originalText = JSON.stringify(row); const result = highlightQuotedText(originalText, wordsToHighlight); console.log(result); // 输出结果: // {"Abstract":"a <span style=\"background-color: #ffff00;\">reference</span> I have a <span style=\"background-color: #ffff00;\">reference</span> <span style=\"background-color: #ffff00;\">serv.</span>..."}
规则说明
*截断符:比如ref*会匹配所有以ref开头的内容(像reference、ref都会被匹配)?字符扩展:比如serv?会匹配serv加上后面1个任意字符(示例里的serv.会被高亮),如果是serv??就会匹配serv加2个字符- 高亮范围:只会对双引号包裹的内容生效,双引号外的内容不会被处理
自定义调整
- 如果你需要修改高亮样式,直接改span标签的
style属性就行(比如换成下划线、不同背景色) - 如果是在React/Vue等框架中,可以把span换成对应的组件,或者用自定义的高亮类名
- 如果需要区分大小写,把正则里的
i标记去掉即可
内容的提问来源于stack exchange,提问作者MokiNex




