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

Question

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

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

<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] 而不是突出显示的搜索模式。我试过 return 模板字符串，例如 backquote${match}backquote，但这会导致显示 a 在我的例子中。

所以我在这里不知所措，非常感谢任何建设性的反馈。

Answer 1

我们应该在 html

中渲染

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

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

Highlighting a substring in a string

regex

jsx

reactjs