0
259
VistasCambiar el color del carácter con expresiones regulares en mecanografiado/reaccionar
¿Por qué mi clase no se usa en mi función regex? Estoy muy confundido sobre lo que está pasando.
expresión regular
let headingTitle: Element | null = document.querySelectorAll("h2") headingTitle.innerHTML = headingTitle.textContent?.replace(/[Miss]/gi,"<span className='title'>Miss</span>");HTML interno no está definido. imprime la lista de nodos dos veces. Primero con todas las etiquetas h2 y luego lo vuelve a hacer y dice nodelist[innerhtml undefined]. Ver imagen:
Lo registré en la consola y vi que className sigue siendo una cadena vacía __reactFiber$f0qledvdhz7: FiberNode {tag: 5, key: null, elementType: 'h2', type: 'h2', stateNode: h2, …} __reactProps$f0qledvdhz7: { niños: 'Señorita'} clave de acceso: ""
childElementCount: 0 childNodes: NodeList [text] children: HTMLCollection [] classList: DOMTokenList [value: ''] className: ""datos mapeados
<div style={hoverStyle} className="grid grid-cols-4 gap-2 p-2 mt-20"> {data?.results.filter((val: any)=>{ if (searchUser === "") { return val } else if (val.name.first.toLowerCase().includes(searchUser.toLowerCase())) { return val } else if (val.email.toLowerCase().includes(searchUser.toLowerCase())){ return val } else if (val.location.city.toLowerCase().includes(searchUser.toLowerCase())){ return val } }).map((d: any) => ( <div style={hoverStyle} className="text-blue-900 ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 border-white shadow-slate-500 bg-white hover:opacity-95 rounded-lg container p-5"> <img className="rounded-full w-44 h-44 " src={d.picture.large} /> <h2>{d.name.title}</h2> <h3 className="font-bold text-3xl font-serif">1 Respuestas
Responde la pregunta0
Ya se siente muy mal usar document.querySelectorAll() en ReactJs. Deberías considerar hacerlo con una forma React.
Sin embargo, document.querySelectorAll() devuelve una matriz de objetos y está intentando acceder a ella de forma incorrecta.
Use solo querySelector o acceda al primer elemento del mismo. Si el objetivo es realizar la operación en todos los elementos devueltos, debe iterarse con for loop, .forEach o cualquier otra posibilidad.
En vainilla javascript, harías esto a continuación
const h2s = document.querySelectorAll("h2"); const replaceStr = "<span class='title'>Miss</span>"; // It has to be innerHTML if you want to be html rendered. // TextContent would dsplay html as a text h2s.forEach((h2) => { h2.innerHTML = h2.innerText.replace(/miss/ig, replaceStr) }); .title{ color: blue; } <h2>Some text</h2> <h2>miss</h2> <h2>Another Miss</h2>