更改包裹在 div 中的字符串的特定部分的颜色答案

【问题标题】：Change the color of the specific portion of a string wrapped in a div更改包裹在 div 中的字符串的特定部分的颜色
【发布时间】：2020-01-31 16:35:22
【问题描述】：

如何改变包裹在 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>

【问题讨论】：

您需要在该部分周围加上<span class="colorRed">。

标签： javascript html css regex

【解决方案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);

【讨论】：

【解决方案2】：

使用替换（）：

您可以只使用replace() 方法来查找和删除字符串的特定部分，然后使用template literals 将相同的部分添加回去，但在其周围带有<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;}

&lt;div id="text" class="text-class"&gt;Stack Overflow is the largest, most trusted online community for developers &lt;/div&gt;

在正则表达式中使用 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;}

&lt;div id="text" class="text-class"&gt;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.&lt;/div&gt;

使用 split() 和 join()：

另一种方法是使用split() 方法在指定分隔符字符串的每个实例处简单地拆分字符串，在您的情况下为trusted online community，然后再次连接字符串彼此由 指定的分隔符字符串分隔，在您的情况下是 <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;}

&lt;div id="text" class="text-class"&gt;Stack Overflow is the largest, most trusted online community for developers.&lt;/div&gt;

【讨论】：