Change the color of the specific portion of a string wrapped in a div

Question

How to change the color of the specific portion of a string wrapped in a div:

We have a div like this:

<div id="text" class="text-class">Stack Overflow is the largest, most trusted online community for developers </div>

How we can change the color of the 'trusted online community' portion to red using the code template below?

let text = document.getElementById("text");

// We want to only change the color of this portion of the text
changeColor('trusted online community');


function changeColor(portion){

    // code to change the text color
    ...
    
    // function to animate the color from black to red
    function changeToRed(el) {
  el.classList.add("colorRed");
    }
    
};

.colorRed {
    animation: colorRedAnime 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86);  
    animation-fill-mode: forwards ;
}

@-webkit-keyframes colorRedAnime {
  from { color: #808080 }
  to   { color: #e80000 }
}

<div class="container"> 
<div id="text" class="text-class">Stack Overflow is the largest, most trusted online community for developers </div>
</div>

You need to wrap a `` around the portion. – Barmar Jan 31 '20 at 16:37 — Barmar, Jan 31 '20 at 16:37

score 3 · Answer 1 · answered Jan 31 '20 at 16:42

you need to create a SPAN and add it in the (inner)html

var lookFor = 'trusted online community';
var idx = text.innerHTML.indexOf(lookFor); //you could use regex also as an alternative
text.innerHTML = text.innerHTML.substring(0, idx) + '<span class="colorRed">' + lookFor + '</span>' + text.innerHTML.substring(idx + lookFor.length);

AndrewL64 · Accepted Answer · 2020-01-31T17:19:16.347

Using replace():

You can just use the replace() method to find and remove a specific portion of your string and use template literals to add the same portion back but with <span> tags around it.

const text = document.querySelector('#text');

const changeColor=(a,b)=> a.innerHTML = a.innerHTML.replace(b, `<span>${b}</span>`);

changeColor(text,"trusted online community");

span{color: red;}

<div id="text" class="text-class">Stack Overflow is the largest, most trusted online community for developers </div>

Using replace() with Regex:

If you want to replace multiple occurrences of a particular portion, you can use regex like this:

const text = document.querySelector('#text');

const changeColor=(a,b)=> {
  let regexB = new RegExp(b,"g");
  a.innerHTML = a.innerHTML.replace(regexB, `<span>${b}</span>`);
}

changeColor(text,"trusted online community");

span {color: red;}

<div id="text" class="text-class">Stack Overflow is the largest, most trusted online community for developers and Stack Overflow is the largest, most trusted online community for developers for a reason.</div>

Using split() and join():

Another way to do this would be to simply split the string at each instance of a specified separator string which in your case is trusted online community using the split() method and then concatenate the string again with each other separated by a specified separator string which in your case is <span>trusted online community</span> using the join() method like this:

const text = document.querySelector('#text');
const changeColor=(a,b)=> a.innerHTML = a.innerHTML.split(b).join(`<span>${b}</span>`);
changeColor(text,"trusted online community");

span {color: red;}

<div id="text" class="text-class">Stack Overflow is the largest, most trusted online community for developers.</div>

Change the color of the specific portion of a string wrapped in a div

2 Answers2

Using replace():

Using replace() with Regex:

Using split() and join():