0
257
ViewsChange character color with regex in typescript/react
why is my class not being using in my regex function? I am very confused on what is going on.
Regex
let headingTitle: Element | null = document.querySelectorAll("h2")
headingTitle.innerHTML = headingTitle.textContent?.replace(/[Miss]/gi,"<span className='title'>Miss</span>");
innerHTML is undefined. it prints the nodelist twice. First with all the h2 tags and then it does it again and says nodelist[innerhtml undefined]. See image:
I console logged it and saw that className is still an empty string __reactFiber$f0qledvdhz7: FiberNode {tag: 5, key: null, elementType: 'h2', type: 'h2', stateNode: h2, …} __reactProps$f0qledvdhz7: {children: 'Miss'} accessKey: ""
childElementCount: 0
childNodes: NodeList [text]
children: HTMLCollection []
classList: DOMTokenList [value: '']
className: ""
mapped data
<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 answers
Answer question0
It already feels very wrong using document.querySelectorAll() in ReactJs. You should consider doing it with a React way.
However, document.querySelectorAll() returns an array of objects and you are trying to access it incorrectly.
Use just querySelector or access the first element of it. If the goal is to do the operation to all of the returned elements then it has to be iterated either with for loop, .forEach, or any other possibilities.
In vanilla javascript, you'd do like this below
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>