突出显示字符串中的子字符串答案

【问题标题】：Highlighting a substring in a string突出显示字符串中的子字符串
【发布时间】：2022-01-01 13:33:57
【问题描述】：

我正在尝试在可搜索的字符串数组中突出显示匹配的子字符串。我想我已经很接近了，只是最后一点不起作用。

我显示一个字符串数组。当我输入输入时，数组中的子字符串应该在与输入匹配时突出显示（使用）。匹配工作正常，但我得到的不是突出显示的文本，而是[object Object]。所以这是有问题的代码部分（它位于 Jsx 中的 .map() 方法中：

<div>
  {item.matched.length > 0
    ? item.name.replace(new RegExp(inputText, 'gi'), (match) => (
        <mark>{match}</mark>
      ))
    : item.name}
</div>

item 是我正在映射的数组的一个元素，它有两个属性：name 和matched。如果name 的部分或全部匹配，matched 要么为空，要么包含键入的搜索模式。这就是我在文本框中输入时得到的：

很明显，搜索和匹配工作正常，看看我得到了什么：[object Object] 而不是突出显示的搜索模式。我尝试返回一个模板字符串，例如 backquote${match}backquote，但在我的示例中会显示 a。

所以我在这里不知所措，任何建设性的反馈将不胜感激。

【问题讨论】：

标签： reactjs regex jsx

【解决方案1】：

我们应该在 html 中渲染

<div dangerouslySetInnerHTML={{ __html: (item.matched.length > 0
    ? item.name.replace(new RegExp(inputText, 'gi'), (match) => {
        return `<span>${match}</span>`
      })
    : item.name) }}>

【讨论】：

哇，谢谢！这很快，也很有效；-) 我仍然不明白为什么我的解决方案不起作用，但是嘿，我刚刚学到了一些新东西。谢谢。