Después de enviar un correo electrónico a una API con un 'valor de búsqueda' que busca el valor en la base de datos y responde con datos que contienen el valor. Quiero resaltar la palabra dada o el valor de búsqueda en la respuesta. La respuesta se rellena en la interfaz de usuario.
<center> {Object.keys(Disp).map((key, i) => ( <center key={i} className="PublicationCard"> <span> {key}</span> <a href={"https://www." + Disp[key]}> View Publication</a> </center> ))} </center>La clave es una oración, pero quiero poner en negrita una palabra en la clave. Por ejemplo, digamos que la clave es "Discusiones sobre inteligencia artificial supervisada" y la consulta de búsqueda fue inteligencia artificial, todo lo que quiero hacer es poner en negrita la consulta de búsqueda que es "inteligencia artificial" en la interfaz de usuario
Tal vez pueda crear una función para generar múltiples etiquetas de intervalo.
function GenerateSpan({ text, search }) { const reg = new RegExp(`(.*)(${search})(.*)`, "g") const array = [...text.matchAll(reg)] if (array.length > 0) { return array[0].slice(1).map((textPart, index) => { return <span key={index} className={textPart === search ? "highlight" : ""}>{textPart}</span> }) } else { return <span>{text}</span> } }Y usa en tu código:
<GenerateSpan text=key search="Supervised"/>Y luego agregue estilo para la clase "resaltar
.highlight{ font-weight: bold }Así que finalmente :
<center> {Object.keys(Disp).map((key, i) => ( <center key={i} className="PublicationCard"> <GenerateSpan text=key search="Supervised"/> <a href={"https://www." + Disp[key]}> View Publication</a> </center> ))} </center>El ejemplo con RegExp funciona más rápido, pero aquí hay una forma más sencilla.
function Highlighter({ highlight = '', children: text }) { const index = text.toLowerCase().indexOf(highlight.toLowerCase()); if (index >= 0 && highlight.length) { const beforeHighlight = text.substring(0, index); const highlightedPart = text.substring(index, index + highlight.length); const afterHighlight = text.substring(index + highlight.length); return ( <highlight-text> {beforeHighlight} <span>{highlightedPart}</span> {afterHighlight} </highlight-text> ); } return <>{text}</>; } export default Highlighter;Y usarlo como:
<Highlighter highlight={'Recursion'}> {'Recursion a misunderstood topic'} </Highlighter>