Question

我有一个搜索框，让用户搜索一个单词。当他们搜索一个单词时，我建议一些链接，当他们点击一个链接时，我会渲染出与其下面的链接相关的数据。

是否可以在我渲染的数据中突出显示搜索到的单词？我正在使用ReactJS并希望扫描我即将渲染的字符串（obj.content）并突出显示以蓝色搜索的单词。

我想成像我必须在我的渲染函数中添加一个check语句或某种CSS。搜索到的单词是obj.content，可以多次出现。

如果我可以在单词中添加一个html span标签，我认为它会起作用。

编辑：也许在我渲染obj.content的地方，如果搜索到的字符串出现，我会在字符串中添加一个检查，获取字符串的长度 - 备份许多空格添加CSS span标记 - 向前移动那么多空格添加CSS span标记并继续？

const getRawHTML = html => ({
    __html: html
 }):

const renderOutData = this.props.data.filter(obj => {
   return this.state.searchedWord === obj.name;   
  }).map((obj, idx) => {
      return (
       <div key={idx}>
          <div dangerouslySetInnerHTML={getRawHTML(obj.content)}></div>
       </div>
     );
});

Answer 1

正则表达式是你的朋友。

将String.replace与动态正则表达式结合使用，将目标词包装在em或其他内容中。

obj.content.replace(new RegExp('(' + string ')', 'ig'), '<em>$1</em>')

有一些问题你会非常仔细地考虑：

应该区分大小写吗？
它应该仅适用于整个世界吗？（例如“测试”中的“测试”）

您还需要努力防范注入攻击。

您已使用dangerouslySetInnerHTML。通过将搜索框连接到它，你就会把红地毯推向黑客。您可以采取一些步骤来消毒用户输入并保护自己。 您已收到警告。

Answer 2

您可以尝试使用此程序包https://www.npmjs.com/package/autosuggest-highlight

它可以帮助您装饰您要搜索的文本。

您可以在此处查看演示https://material-ui-next.com/demos/autocomplete。

一个简单的例子可能是：

const text = 'React rules!'
const searchedWord = 'Re'

const matches = match(text, searchedWord)
const parts = parse(text, matches)

const highlightSearch = parts.map((part, index) => {
  return part.highlight ? (
    <span key={index} style={{ fontWeight: 500 }}>
      {part.text}
    </span>
  ) : (
    <strong key={index}>
      {part.text}
    </strong>
  )
})

渲染的结果将是：重新行动规则！

如何在我渲染的数据中突出显示搜索到的单词？

2 个答案: