Resaltar texto usando ReactJS

Te damos la bienvenida a nuestro espacio, en este sitio vas a hallar la solucíon a lo que andabas buscando.

Solución:

Aquí está mi método de ayuda simple de dos líneas:

getHighlightedText(text, highlight) 
    // Split text on highlight term, include term itself into parts, ignore case
    const parts = text.split(new RegExp(`($highlight)`, 'gi'));
    return parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? part : part);

Devuelve un lapso, donde las partes solicitadas se resaltan con etiquetas Esto se puede modificar simplemente para usar otra etiqueta si es necesario.

ACTUALIZAR: Para evitar ser único key advertencia faltante, aquí hay una solución basada en tramos y configuración del estilo fontWeight para las partes coincidentes:

getHighlightedText(text, highlight) 
    // Split on highlight term and include term into parts, ignore case
    const parts = text.split(new RegExp(`($highlight)`, 'gi'));
    return   parts.map((part, i) => 
        
             part 
        )
     ;

Aquí hay un ejemplo de un componente de reacción que usa el estándar etiqueta para resaltar un texto:

const Highlighted = (text = '', highlight = '') => 
   if (!highlight.trim()) 
     return text
   
   const regex = new RegExp(`($_.escapeRegExp(highlight))`, 'gi')
   const parts = text.split(regex)
   return (
     
        parts.filter(part => part).map((part, i) => (
            regex.test(part) ? part : part
        ))
    
   )

Y aquí está cómo usarlo

Ya hay un componente de reacción en NPM para hacer lo que quieras:

var Highlight = require('react-highlighter');
[...]
name

Si sostienes algún titubeo o capacidad de desarrollar nuestro reseña puedes añadir una crítica y con placer lo analizaremos.

---

---

Utiliza Nuestro Buscador