Изменить цвет указанной части c строки, заключенной в div

Question

Как изменить цвет указанной части c строки, заключенной в div:

У нас есть такой div:

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

Как мы можем изменить цвет части «доверенного интернет-сообщества» - красный с использованием приведенного ниже шаблона кода?

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>

Answer 1

вам нужно создать SPAN и добавить его в (внутренний) 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);

Answer 2

Использование replace ():

Вы можете просто использовать метод replace () , чтобы найти и удалить определенную c часть вашей строки и использовать литералы шаблона чтобы добавить ту же часть обратно, но с тегами <span>.

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>

Использование replace () с регулярным выражением:

Если вы хотите заменить несколько вхождений определенной части, вы можете использовать регулярное выражение как это:

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>

Использование split () и join ():

Еще один способ сделать это - просто разбить строку на каждом экземпляр указанной строки-разделителя , которая в вашем случае равна trusted online community с использованием метода split () , а затем снова объединяет строки друг с другом, разделенные указанной строкой-разделителем , в вашем случае это <span>trusted online community</span> с использованием метода join () следующим образом:

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>