You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何使用正则表达式高亮字符串块?双引号内文本高亮需求

实现双引号内指定单词的高亮功能

嘿,我来帮你搞定这个字符串高亮的需求!结合你提到的规则——包括双引号内范围、*截断符、?匹配单词加n字符的效果,我用JavaScript写了一套可行的实现方案,咱们一步步来看:

核心思路

  1. 先解析wordsToHighlight参数,提取出要高亮的规则,处理*?的特殊匹配逻辑
  2. 定位全文本中所有双引号包裹的内容,只在这些范围内应用高亮规则
  3. 将匹配到的目标内容替换为带高亮样式的标记(这里用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开头的内容(像referenceref都会被匹配)
  • ?字符扩展:比如serv?会匹配serv加上后面1个任意字符(示例里的serv.会被高亮),如果是serv??就会匹配serv加2个字符
  • 高亮范围:只会对双引号包裹的内容生效,双引号外的内容不会被处理

自定义调整

  • 如果你需要修改高亮样式,直接改span标签的style属性就行(比如换成下划线、不同背景色)
  • 如果是在React/Vue等框架中,可以把span换成对应的组件,或者用自定义的高亮类名
  • 如果需要区分大小写,把正则里的i标记去掉即可

内容的提问来源于stack exchange,提问作者MokiNex

火山引擎 最新活动