改进功能以突出显示所有类型的搜索词 - React Native

Question

我是运行 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" 都没有突出显示。

我希望文本即使不连续也能突出显示。
我怎样才能调整突出显示功能来实现这一目标？

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

Answer 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

改进功能以突出显示所有类型的搜索词 - React Native

improve function to highlight all types of search terms - react native

javascript

search

reactjs

react-native