Estoy creando una interfaz simple donde el usuario ingresa una entrada en el área de texto y un elemento de búsqueda en una entrada. La salida debe resaltar las subcadenas de texto proporcionadas en el área del elemento de búsqueda.
const Highlighter = () => { const [myPara, setMyPara] = useState(""); const [searchTerm, setSearchTerm] = useState(""); const [caseSensitive, setCaseSensitive] = useState(true); const onUpdateText = (event) => { setMyPara(event.target.value); } const onUpdateSearch = (event) => { setSearchTerm(event.target.value); console.log(caseSensitive) } const onUpdateCaseSensitive = (event) => { setCaseSensitive(!caseSensitive) console.log(caseSensitive) } const getHighlightedText = (toHighlight) => { const myText = myPara.split(''); const searchString = toHighlight.split(''); return ( <span> {myText.filter(String).map((part, i) => { return part.includes(searchString) ? ( <mark key={i}>{part}</mark> ) : ( <span key={i}>{part}</span> ); })} </span> ); } return ( <> <textarea data-testid="source-text" value={myPara} onChange={onUpdateText} /> <br/> <input data-testid="search-term" value={searchTerm} onChange={onUpdateSearch} /> <br/> case sensitive? <input type="checkbox" data-testid="case-sensitive" defaultChecked={true} onChange={onUpdateCaseSensitive} /> <br/> <div data-testid="result">{getHighlightedText(searchTerm)}</div> </> ); }; export default Highlighter;Mi intento es como el anterior. Sin embargo, no está resaltando ninguna cadena en absoluto. ¿Alguien puede ayudarme a detectar el error?
Gracias.
Probé su componente y funciona si busca solo una letra. Está dividiendo su texto en letras y letras de mapa. Se supone que include no funciona con una matriz de letras.
Necesitará otro enfoque para buscar su cadena, tal vez con expresiones regulares: busque todas las instancias de una cadena dentro de una cadena
Pienso entonces, una vez que tengas los índices de las ocurrencias de tu búsqueda. Deberá mapear su cadena y resaltar los índices encontrados + las siguientes letras según el tamaño de su búsqueda.