I'm trying to highlight a text following this code:
function getHighlightedText(text, highlight) {
var parts = text.split(new RegExp(`(${highlight})`, 'gi'));
return parts.map((part, index) => (
<React.Fragment key={index}>
{part.toLowerCase() === highlight.toLowerCase() ? <b style={{ backgroundColor: '#e8bb49' }}>{part}</b> : part}
</React.Fragment>
));
}
When I pass as arguments a text with accents and highlight without, I can't get the right return as I want
Exemple 01: getHighlightedText("Avô","avo")
Expected 01: (hightlighted) Avô
Returned 01: nothing
Exemple 02: getHighlightedText("Coração","cao")
Expected 02: (Not Hightlight) Cora (hightlighted) ção
Returned 02: nothing
The problem is when I try to split a text with accents with another there aren't accents my return is unexpected.
Question: Is there any way to put some rule in split to handle this case?
I'm trying to avoid handle with it go through all both string (e.g using For)