JSX实现搜索匹配子串高亮返回[object Object]问题求助

问题根因 #

• 原生String.replace()方法的返回值始终是字符串类型，你在回调中返回JSX对象时，JS会自动将对象转为[object Object]字符串，这就是你看到异常的直接原因。
• 直接返回HTML模板字符串的话，React默认会对内容做转义处理避免XSS攻击，因此不会将字符串解析为真实的DOM标签，只会原样输出文本。

可行解决方案 #

方案1：分割文本渲染JSX（推荐，无XSS风险） #

把原始文本按匹配关键词切割为普通文本片段和匹配片段的数组，直接渲染为JSX节点，是最安全的实现方式：

// 封装高亮处理工具函数
const getHighlightedText = (text, keyword) => {
  if (!keyword?.trim()) return text;
  // 先转义正则特殊字符避免匹配异常
  const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`(${escapedKeyword})`, 'gi');
  const parts = text.split(regex);
  return parts.filter(Boolean).map((part, index) => 
    regex.test(part) ? <mark key={index}>{part}</mark> : part
  );
};

// 渲染逻辑直接调用即可
<div>
  {item.matched.length > 0 
    ? getHighlightedText(item.name, inputText)
    : item.name
  }
</div>

方案2：使用dangerouslySetInnerHTML（适合内容可信场景） #

如果确认展示的item.name为平台可控的可信内容、不存在用户注入恶意脚本的风险，可以使用该属性直接渲染HTML字符串：

<div>
  {item.matched.length > 0 ? (
    <div dangerouslySetInnerHTML={{
      __html: item.name.replace(
        new RegExp(inputText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'), 
        match => `<mark>${match}</mark>`
      )
    }} />
  ) : item.name}
</div>

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