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

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” 。

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

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

标签： javascriptreactjsreact-nativesearch

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