改进功能以突出显示所有类型的搜索词 - 反应原生答案

【问题标题】：improve function to highlight all types of search terms - react native改进功能以突出显示所有类型的搜索词 - 反应原生
【发布时间】：2021-07-02 06:57:24
【问题描述】：

我正在运行一个 React Native 应用程序。我有一个 SearchBar 可以突出显示搜索结果中的文本。

代码：

Highlight(fullText, searchTerm){   //Highlight function
  if (!searchTerm.trim()) {
    return <Text>{fullText}</Text>
  }
  const regex = new RegExp(`(${_.escapeRegExp(searchTerm)})`, 'gi')
  const parts = fullText.split(regex)
  let final = parts.filter(part => part).map((part, i) => regex.test(part) ?
      <Text style={{backgroundColor: 'coral'}} key={i}>{part}</Text>
     : <Text key={i}>{part}</Text>
  )
  return (
    <Text>{final}</Text>
  )
}






render(){

<Text> this.Hightlight(text, search) </Text>

}

但此突出显示功能不适用于以下搜索词。
我输入了 "ha mess"，但没有突出显示 "ha" 和 "mess"。

我希望文本即使不连续也能突出显示。
我该如何调整高亮功能来实现这一点？？

预期结果如下所示。无论单词的顺序如何，所有内容都会突出显示。

【问题讨论】：

所以你需要分别突出 ha 和 mess 吗？
是的。无论单词的顺序如何，我输入的任何内容都需要突出显示。
@Apostolos 检查我更新的问题。我已经添加了预期的结果。
所以如果你输入“lo do”并且文本有“falo dobava”它应该突出显示“lo do”以及空白空间？或者只是 lo 并分开做？
@Apostolos 它应该单独突出显示“lo”“do”，没有空格。

标签： javascript reactjs react-native search

【解决方案1】：

您需要用空格分隔searchTerm。

const regexStr = "(" + searchTerm.trim().split(/\s+/).map(escapeRegExp).join("|") + ")";
const regex = new RegExp(regexStr, "gi");

现场演示：https://codesandbox.io/s/keen-pascal-4trrk?file=/src/App.js:419-460

【讨论】：

谢谢伙计。但这会导致空白问题。当我输入“ha”（带有空格的ha）时，整个文本“ha general message”都会突出显示。
@grooot 抱歉，忘记修剪 searchTerm，已修复。