I have an array of titles which follow a similar format as below:
dolor ea consequat <span style="color: #fa8231;"><deserunt></span> officia non elit <span style="color: #41B3A3;"><aliqua></span> ex minim eu
which are displayed to the user using the dangerouslysetInnerHTML property.
They are displayed to the user in a list and the user is able to filter the array given keyword(s) and the keyword(s) are highlighted. For example, searching for dolor would return the following string (using replace()) which is also displayed using the dangerouslysetInnerHTML property of ReactJS:
<span style="background-color: #6d7fcc; color: #fff">dolor</span> ea consequat <span style="color: #fa8231;"><deserunt></span> officia non elit <span style="color: #41B3A3;"><aliqua></span> ex minim eu
NOTE: The keyword can also include the text between the <(<) and >(>) tags and that text should also be highlighted. And the <span> tags in the original string should not be included in the search and replace.
Here's my RegEx code to search for the keyword(s) in the string:
const regexStr = `${keyword}(?=[^>]*<)`;
const highlightRegex = new RegExp(regexStr, 'gi');
The problem I am encountering is that the search does not include the last part of the string (anything past the last </span>) in the search, so ex minim eu is not included.
I am trying to learn RegEx, so my knowledge is weak.
Could someone tell me what I am doing incorrectly?
I added this to my regex and that seemed to have work. Not sure if this is the best or most efficient way. Would still love any feedback!
const regexStr = `${keyword}((?=[^>]*<)|(?![^<]*>))`;