[英]how to use react-highlight-words to highlight multiple keywords with different colors
I am developing a search function in my React project.我正在我的 React 项目中开发搜索 function。 In the beginning, I only need to input one keyword and search for it in the text, save the sentences with this keyword and display the result sentences separately.
一开始我只需要输入一个关键字在文本中搜索,用这个关键字保存句子,分别显示结果句子。 I am using "react-highlight-words" https://github.com/bvaughn/react-highlight-words to highlight this single keyword in all the search result sentences.
我正在使用“react-highlight-words” https://github.com/bvaughn/react-highlight-words在所有搜索结果句子中突出显示这个关键字。
{searchResults.map((result, idx) => {
return (
<div key={`search-result-${idx}`}>
<br />
<Highlighter
highlightClassName='YourHighlightClass'
searchWords={[textForSearch]}
autoEscape={true}
textToHighlight={finalResults[idx]}
key={idx}
/>
</div>
</div>
);
})}
above textForSearch
is the keyword finalResults
is the search result.上面
textForSearch
是关键字finalResults
是搜索结果。 I use a keyword to loop through the text and save the match sentences as elements to an array.我使用关键字循环文本并将匹配的句子作为元素保存到数组中。
But now I need to input multiple keywords in one search and display some sentences or a paragraph containing these keywords and highlight different keywords with different colors.但是现在我需要在一次搜索中输入多个关键字,并显示一些包含这些关键字的句子或段落,并用不同的 colors 突出显示不同的关键字。
how can I use this component to do it?我怎样才能使用这个组件来做到这一点? and if some other way to do it please tell me.
如果有其他方法,请告诉我。 I have seen many topics and answers related to search and highlight but they all highlight different words with the same color.
我见过许多与搜索和突出显示相关的主题和答案,但它们都以相同的颜色突出显示不同的单词。
const Highlight = ({ children, highlightIndex }) => ( <span className={ highlighted-text keyword-${highlightword.indexOf(children)}
}>{children} ); const Highlight = ({ children, highlightIndex }) => ( <span className={
highlighted-text keyword-${highlightword.indexOf(children)}
}>{children} );
and add tag - highlightTag={Highlight}并添加标签 - highlightTag={Highlight}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.