Javascript/jQuery 通过特定的某些文本更改单词颜色包含

Question

I have a simple question with jQuery Css.

I would like to change color of my text by specific word contains using jQuery.

I have example like this:

<div class="me">I'm Groot</div>

1. I'm <-- will be always black color
   
2. Groot <-- will be always green color and Groot sometimes can be change with another word.

How can I do that with jQuery or javascript?

Answer 1

You could replace all occurrences of your specific text snippets with custom styled html elements:

const yourName = "Groot";

const element = document.querySelector(".me");
element.innerHTML = element.innerHTML
    .replace("I'm", `<span class="black-class">I'm</span>`)
    .replace(yourName, `<span class="green-class">${yourName}</span>`);

Alternatively you can also make everything green except the I'm like this:

.me {
  color: green;
}

element.innerHTML = element.innerHTML
    .replace("I'm", `<span class="black-class">I'm</span>`);

This way not only Groot is colored green but everything inside of the div . That way your JavaScript doesn't need to know the name.

Answer 2

Just group them like so:

<div class="me">I'm <span id="changer">Groot</span></div>

Then for CSS, style it like so:

#changer {
    color: green;
}

Then to change with javascript:

document.getElementById("changer").innerHTML = "Changed";

Which of course you can add a setTimeout to change continuously

---

Edit: No problem, since the only part changing is "Groot" part, So:

var changing = "Groot";
$('.me').text(`I'm <span id="changer">${changing}</span>`);
// then from here the value of the $('#changer') can be accessed and changed
$('#changer').text('Not Groot');