Apply class to all classes if it cotains a certain string-CodePudding

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 >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"

CodePudding user response：

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 >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 >Manager</span>
<span >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 >Store Manager</span>
<span >Operation Manager</span>

CodePudding user response：

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 >Manager</span>
<span >Developer</span>
<span > QA Manager </span>
<span > 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 >Manager</span>
<span >Developer</span>
<span > QA Manager </span>
<span > Dev Manager</span>