Tengo una serie de títulos que siguen un formato similar al siguiente:
dolor ea consequat <span style="color: #fa8231;"><deserunt></span> officia non elit <span style="color: #41B3A3;"><aliqua></span> ex minim eu que se muestran al usuario mediante la propiedad dangerouslysetInnerHTML .
Se muestran al usuario en una lista y el usuario puede filtrar la matriz de palabras clave dadas y las palabras clave se resaltan. Por ejemplo, buscar dolor devolvería la siguiente cadena (usando replace() ) que también se muestra usando la propiedad dangerouslysetInnerHTML de 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 NOTA : La palabra clave también puede incluir el texto entre < (<) y > (>) etiquetas y ese texto también debe estar resaltado. Y las etiquetas <span> en la cadena original no deben incluirse en la búsqueda y reemplazo. Aquí está mi código RegEx para buscar las palabras clave en la cadena:
const regexStr = `${keyword}(?=[^>]*<)`; const highlightRegex = new RegExp(regexStr, 'gi'); El problema que encuentro es que la búsqueda no incluye la última parte de la cadena (nada más allá de la última </span> ) en la búsqueda, por lo que ex minim eu no está incluido. Estoy tratando de aprender RegEx, por lo que mi conocimiento es débil. ¿Alguien podría decirme qué estoy haciendo incorrectamente?
Agregué esto a mi expresión regular y eso pareció funcionar. No estoy seguro si esta es la mejor manera o la más eficiente. Todavía me encantaría cualquier comentario!
const regexStr = `${keyword}((?=[^>]*<)|(?![^<]*>))`;