你是否遇到过这些问题？

平时工作需要那种Neng保存多个关键字，打开任何网页douNeng自动高亮的插件。有没有这种 工具？

今天我将分享一个 不到百行代码 的终极解决方案 markWords。它不仅完美解决了上述所有问题，还支持 React 虚拟 DOM 直接渲染！

核心实现逻辑

核心是使用一个正则方法即可满足关键词高亮需求：

const getInf =  => str.replace`, 'g'), `%%$1%%`).split;

举例：关键词“鞋”；展示词“篮球鞋”

getInf 返回结果为：

💡 效果演示 场景一：英文全字匹配

关键词： 文本："This is a test case for testing."

✅ 智Neng匹配英文自动开启全字匹配，中文自动开启模糊匹配。

结果：只有 test 被高亮，testing 中的 test 不会被误伤。

场景二：代码安全与性Neng优化

这个小工具虽然简单，但细节满满。它在保证 安全性 的前提下兼顾了 中英文语言特性 和 代码健壮性。

使用示例

在组件中直接调用即可，就像使用普通的字符串一样：

import React from 'react';
/**
 * 智Neng标记文本中的关键词
 * 
 * 特性：
 * - 英文单词 -> 全字匹配 
 * - 中文/符号 -> 模糊匹配
 * - 自动转义正则特殊字符
 * - 返回 ReactNode 数组，安全无 XSS 风险
 * 
 * @param {string} text - 原始文本
 * @param {string} words - 关键词数组
 * @param {string} highlightClass - 高亮类名
 */
export const markWords =  => {
  if  {
    return ;
  }
  // 构造智Neng正则
  const pattern = words
    .map(word => {
      const escaped = word.replace|\\]/g, '\\$&');
      if ) {
        return `\\b${escaped}\\b`;
      }
      return escaped;
    })
    .join;
  if  return ;
  const regex = new RegExp`, 'gi');
  const parts = ;
  let lastIndex = 0;
  let match;
  while ) !== null) {
    if  {
      parts.push);
    }
    parts.push(
      React.createElement
    );
    lastIndex = match.index + match.length;
  }
  if  {
    parts.push);
  }
  return parts.length> 0 ? parts : ;
};
  

这个小工具虽然简单，但细节满满。它在保证 安全性 的前提下兼顾了 中英文语言特性 和 代码健壮性。

使用建议

把这个函数收藏进你的代码片段库，以后遇到高亮需求，一秒搞定！💪

效果演示

关键词： 文本："C++ is a powerful language."

在前端开发中，“关键词高利”是一个kan似简单实则暗坑无数的需求。

直接将以下代码复制到你的 utils.ts 中：

const Article =  => {
  return (
    

      {/* 高亮标题 */}
      {markWords}
      {/* 高亮正文 */}
      
{markWords}
    
  );
};
  

别忘了定义 CSS：

.highlight { color: #ff4d4f; background-color: #fff1f0; font-weight: bold; border-radius: 2px; }

关键词： 文本："我喜欢吃苹果，因为Applehen好吃。"

✅智Neng匹配英文自动开启全字匹配，中文自动开启模糊匹配。

结果：只有“苹果”和“Apple”被高亮，不会误伤其他内容。

这个小工具虽然简单，但细节满满。它在保证 安全性 的前提下兼顾了 中英文语言特性 和 代码健壮性。

---