Tengo un componente que tiene datos asignados. Mi tarea es cambiar el color de fondo de caracteres específicos. En este caso, son "Señorita", "Señora", "Sra". Sé que puedo usar expresiones regulares, pero sigo recibiendo un objeto de error que posiblemente sea nulo.

Este es el componente y lo que he probado.

 const h2 = document.querySelector("h2") h2.innerHTML = h2.textContent.replace(/[ms]/g, "<span class='title'>Miss</span>"); .title { background-color: blue; } .map((d: any) => ( <div style={hoverStyle} className=" ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 border-white shadow-slate-500 bg-white hover:bg-slate-200 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"> {" "} {d.name.first} {d.name.last} </h3> <p className=" text-md ">Gender: {d.gender}</p> <p className=" text-md bg-blue-300 text-white ">Contact: {d.email}</p> <p className=" text-md "> City: {d.location.city} </p> </div> ))} </div>

Este es el código sandbox

https://codesandbox.io/s/sweet-mclean-nrhcdq?file=/src/App.tsx