js关键字标红

TP:以下两种方法多次匹配也不会造成匹配结果混乱的问题

  1. 第一种方法
javascript 复制代码
let keyword = ["red", "color", ">"];
let tableData = {
  MatchCompanyName: "color fjkfffs red >",
};

// 关键词高亮函数
function highlightKeywords(data, keywords) {
  let matchCompanyName = data.MatchCompanyName;
  let result = '';
  let lastIndex = 0;

  // 构建一个正则表达式,将所有关键词合并到一个表达式中
  const regex = new RegExp(keywords.join('|'), 'gi');

  // 遍历所有的匹配项
  matchCompanyName.replace(regex, (match, index) => {
    // 拼接匹配前的部分
    result += matchCompanyName.slice(lastIndex, index);
    // 拼接高亮的部分
    result += `<span class="highlighted">${match}</span>`;
    // 更新最后一个匹配结束的索引
    lastIndex = index + match.length;
  });

  // 拼接剩余的部分
  result += matchCompanyName.slice(lastIndex);

  return result;
}

// 获取高亮后的结果
let highlightedText = highlightKeywords(tableData, keyword);

// 输出结果或更新 DOM
console.log(highlightedText);

// 在 HTML 中可以使用 "highlighted" 类进行样式设置
/*
<style>
  .highlighted {
    color: red;
  }
</style>
*/
  1. 第二种
javascript 复制代码
let keyword = ["red", "color", ">"];
let tableData = {
  MatchCompanyName: "color fjkfffs red >",
};

// 函数用于根据关键词高亮匹配项
function highlightKeywords(data, keywords) {
  let matchCompanyName = data.MatchCompanyName;
  let highlights = []; // 用于存储匹配的起始和结束位置

  // 查找每个关键词的匹配位置
  keywords.forEach((word) => {
    const regex = new RegExp(word, 'gi'); // 大小写不敏感匹配
    let match;
    while ((match = regex.exec(matchCompanyName)) !== null) {
      highlights.push({ start: match.index, end: regex.lastIndex });
    }
  });

  // 按照匹配的位置从后往前插入 <span>,避免位置错乱
  highlights.sort((a, b) => b.start - a.start);

  highlights.forEach((highlight) => {
    matchCompanyName =
      matchCompanyName.slice(0, highlight.start) +
      '<span class="highlighted">' +
      matchCompanyName.slice(highlight.start, highlight.end) +
      '</span>' +
      matchCompanyName.slice(highlight.end);
  });

  return matchCompanyName;
}

// 获取高亮后的结果
let highlightedText = highlightKeywords(tableData, keyword);

// 输出结果或更新 DOM
console.log(highlightedText);

// 在 HTML 中可以使用 "highlighted" 类进行样式设置
/*
<style>
  .highlighted {
    color: red;
  }
</style>
*/

总结:第一种方法通过一次遍历来找到所有的匹配项并构建新的字符串,避免在替换时频繁地操作字符串。这种方式减少了字符串的拼接操作,提高了性能。

相关推荐
OEC小胖胖4 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->5 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端6 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8887 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js