I have a profile card that contains a job role inside a span, and I'm trying to get the content of the job role using textContent, and if it matches a certain word, I want to add a class to the span
<span class="jobrole">Manager</span>
Here is the javascript:
var text = document.querySelector(".jobrole").textContent;
var job = document.querySelector(".jobrole");
if (text == "Manager") {
for (var i = 0; i < job.length; ++i) {
job.classList.add("manager");
}
}
However, it's not applying the manager class to any on the spans that contain the string "manager"
If you want to apply to only first found element with Manager content, you should implement this way
var job = document.querySelector(".jobrole");
var text = job.textContent;
if (text === "Manager") {
job.classList.add("manager");
}<span class="jobrole">Manager</span>If you want to have many more similar elements with Manager content, you should use querySelectorAll instead
var jobs = document.querySelectorAll(".jobrole");
for (var i = 0; i < jobs.length; i++) {
var text = jobs[i].textContent;
if (text === "Manager") {
jobs[i].classList.add("manager");
}
}<span class="jobrole">Manager</span>
<span class="jobrole">Manager</span>One further case is that you want to check multiple manager types like Store Manager, Operation Manager, etc. With this pattern, you can use .includes
var jobs = document.querySelectorAll(".jobrole");
for (var i = 0; i < jobs.length; i++) {
var text = jobs[i].textContent;
if (text && text.toLowerCase().includes("manager")) { //ignore case sensitive for `text` which means `manager` is also a match
jobs[i].classList.add("manager");
}
}<span class="jobrole">Store Manager</span>
<span class="jobrole">Operation Manager</span>1) If you just want to add a class that has textContent as manager then you can also use regex here as:
textContent.match(/^manager$/i) // case-sensitive
const allJobRoleEl = document.querySelectorAll(".jobrole");
allJobRoleEl.forEach((jobRoleEl) => {
const textContent = jobRoleEl.textContent;
if (textContent.match(/^manager$/i)) {
jobRoleEl.classList.add("manager");
}
});.manager {
background-color: red;
color: white;
padding: 0.25rem;
margin: 0.5rem;
border-radius: 4px;
}<span class="jobrole">Manager</span>
<span class="jobrole">Developer</span>
<span class="jobrole"> QA Manager </span>
<span class="jobrole"> Dev Manager</span>NOTE: But If you want to add class to all those elements that contain text manager then you can do as:
textContent.match(/^manager$/i) // case-sensitive
const allJobRoleEl = document.querySelectorAll(".jobrole");
allJobRoleEl.forEach((jobRoleEl) => {
const textContent = jobRoleEl.textContent;
if (textContent.match(/manager/i)) {
jobRoleEl.classList.add("manager");
}
});.manager {
background-color: red;
color: white;
padding: 0.25rem;
margin: 0.5rem;
border-radius: 4px;
}<span class="jobrole">Manager</span>
<span class="jobrole">Developer</span>
<span class="jobrole"> QA Manager </span>
<span class="jobrole"> Dev Manager</span>