React 实现搜索建议组件查询匹配高亮的现有正则逻辑问题

• 直接拼接用户输入构造正则，未做特殊字符转义，当用户输入含., *, (这类正则保留字符时，正则会直接报错失效。
• 正则开启全局匹配标记g后，调用test()方法会保留lastIndex状态，导致后续匹配位置偏移，匹配结果随机不准。
• 正则匹配逻辑把整个高亮字符串作为连续整体匹配，遇到带空格的查询时，只会匹配完全连续的片段，无法拆分多个子片段分别高亮。
• JSX语法错误：<em>key={i}> 把属性写在了标签闭合括号外面，实际渲染会把key当文本输出，原本用于高亮的em标签完全失效。

1. 对用户输入的查询内容按空白拆分，过滤空值，得到独立的关键词列表。
2. 对每个关键词做正则特殊字符转义，避免正则异常。
3. 构造可匹配任意关键词的正则，对拆分后的文本片段做判断，匹配到的部分统一标记为高亮。
4. 匹配判断时避开全局正则的状态偏移问题，保证每个片段的匹配结果准确。

// 正则特殊字符转义工具
const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

function Highlight({ text = '', highlight = '' }) {
  // 拆分查询关键词，过滤空值
  const keywords = highlight.trim().split(/\s+/).filter(Boolean);
  // 无有效关键词时直接返回原文本
  if (!keywords.length) return <span>{text}</span>;

  // 构造拆分用正则：匹配任意关键词片段
  const splitRegex = new RegExp(`(${keywords.map(escapeRegExp).join('|')})`, 'i');
  const textParts = text.split(splitRegex);
  // 构造匹配校验用正则：无全局状态，避免lastIndex偏移
  const testRegex = new RegExp(`^(${keywords.map(escapeRegExp).join('|')})$`, 'i');

  return (
    <span>
      {textParts
        .filter(part => part)
        .map((part, index) => (
          testRegex.test(part)
            ? <mark key={index} className="search-highlight">{part}</mark>
            : <span key={index}>{part}</span>
        ))}
    </span>
  );
}

基础实现下的匹配效果，可覆盖大部分常规搜索高亮需求：

• 查询United St时：
  • United States文本中，匹配到United、St两个独立片段，均做高亮，显示为连续的高亮段。
  • United Airlines文本中，匹配到United片段，对应位置高亮，符合核心需求。
• 若需要完全匹配你提到的特殊场景效果（比如查询nited St时仅高亮St、查询Unit St时United Airlines无高亮），可在组件逻辑中增加校验：

  对带空格的多关键词查询，仅当文本中能匹配到所有关键词时，才渲染所有匹配片段的高亮；如果仅匹配到部分关键词，只高亮文本中最后一个关键词对应的匹配片段。
  调整后即可完全对齐你列出的三个预期场景。

内容的提问来源于stack exchange，提问作者Casper222