Estoy tratando de resaltar el texto que coincide con la consulta, pero no puedo averiguar cómo hacer que las etiquetas se muestren como HTML en lugar de texto.
var Component = React.createClass({ _highlightQuery: function(name, query) { var regex = new RegExp("(" + query + ")", "gi"); return name.replace(regex, "<strong>$1</strong>"); }, render: function() { var name = "Javascript"; var query = "java" return ( <div> <input type="checkbox" /> {this._highlightQuery(name, query)} </div> ); } });Salida actual: script <strong>Java</strong>
Salida deseada: secuencia de comandos Java
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 <span>{parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? <b>{part}</b> : part)}</span>; } Devuelve un lapso, donde las partes solicitadas se resaltan con las etiquetas <b> </b> . Esto se puede modificar simplemente para usar otra etiqueta si es necesario.
ACTUALIZACIÓN: para evitar la advertencia de falta de clave única, aquí hay una solución basada en lapsos y la 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 <span> { parts.map((part, i) => <span key={i} style={part.toLowerCase() === highlight.toLowerCase() ? { fontWeight: 'bold' } : {} }> { part } </span>) } </span>; }Aquí hay un ejemplo de un componente de reacción que usa la etiqueta estándar <mark> para resaltar un texto:
const Highlighted = ({text = '', highlight = ''}) => { if (!highlight.trim()) { return <span>{text}</span> } const regex = new RegExp(`(${_.escapeRegExp(highlight)})`, 'gi') const parts = text.split(regex) return ( <span> {parts.filter(part => part).map((part, i) => ( regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span> ))} </span> ) }Y aquí está cómo usarlo
<Highlighted text="the quick brown fox jumps over the lazy dog" highlight="fox"/>Ya hay un componente de reacción en NPM para hacer lo que quieras:
var Highlight = require('react-highlighter'); [...] <Highlight search={regex}>{name}</Highlight>