Javascript 如何在html元素文本中为特定字母添加颜色？

我有一些

span

里面有一些单词，比如

        <span id="phrase">Here are some words</span>

这里有一些单词

我需要将所有

'e'

字符涂成红色

我考虑使用

span.innerText属性

，从span元素中删除文本节点，并在其中（或相反）添加更多的span，并为它们提供必要的样式

---

这是唯一的方法，还是可以用更优雅的方式解决？

如果您只需要一个已知字符串为红色，则不需要javascript：

html

---

您当然可以使用javascript实现这一点：

var span=document.getElementById（'phrase'），
text=span.innerHTML.split（“”）.map（函数（el）{
返回“+el+”；
}).加入（“”）；
span.innerHTML=文本
.char-e{
颜色：红色；
}
这里有一些单词
您不能针对文本中的特定字母（使用
的第一个字母除外：第一个字母
）。因此，是的，您唯一的选择是使用元素包装它们。一个
span
就行了，FontAwesome的人喜欢用
i
来代替

例如，你可以这样做：

<span id="phrase">H<i>e</i>r<i>e</i> are som<i>e</i> words</span>

我认为使用javascript并没有那么难看：

$(document).ready(function() {
   console.log( "ready!" );
   var text = $("#phrase").html().replace(/e/g, '<span class="red">e</span>');
    $("#phrase").html(text)
});

$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
var text=$（“#短语”）.html（）.replace（/e/g，'e'）；
$（“#短语”）.html（文本）
});

更复杂的实现（包含dfsq代码），用于保留标记：


函数addColor（domNode、颜色、字母）{
if（domNode.nodeType！=1 | |！domNode.hasAttribute（'edited'））{
if（domNode.nodeType==3）{
var newText=document.createElement（'span'）；
newText.innerHTML=domNode.textContent；
newText.setAttribute（'edited'，true）；
var text=newText.innerHTML.split（“”）.map（函数（el）{
如果（el==字母）{
返回“+el+”；
}
否则{
返回el；
}
}).加入（“”）；
newText.innerHTML=文本；
domNode.parentNode.replaceChild（newText，domNode）；
}
对于（var i=0；i拆分字符串中的每个字符，如果字符是
'e'
，则使用
fontcolor
函数指定红色

代码
var s1=document.getElementById（“短语”）；
var str=s1.innerHTML；
var newText=“”；
对于（变量i=0；i

可以使用。我添加了一些代码，以防万一。请注意Javascript标记。我猜OP不想手动将类添加到每个etrue，但将其放在那里-如果字符串已知，则不需要Javascript。让我们看看OP是怎么说的。当然，我需要所有这些东西来动态工作。问题是跨度的内容在变化动态地，所以我每次都需要用javascript应用转换。如果跨度包括链接或其他子节点，则会中断。@MildlySerious但OP没有提到链接。@MildlySerious是的，这是真的。这就是为什么我提到它只适用于小文本，如标题等。@MildlySerious但
innerText
仅适用于MS，在FF中不起作用。@Superdrac我刚刚提到过它。有人没想到它会坏掉。你在标记中看到jQuery了吗？只要有文本以外的内容就会坏掉。这至少应该被提及。@Superdrac jQuery是javascript，所以请不要讽刺……这是我发现的最快的显示方式。我可以已经用dart、angular或其他什么东西演示过了，它仍然是javascript…MildySerious你需要用html来修复这个例子还是仅仅为了提升你的答案？如果你想改变不止一种类型的字符，我会改进它。（注：尝试7和以下不是我的，但我笑得很厉害：D）
String.prototype.fontcolor
已被弃用。最佳解决方案..简单而优雅
<span id="phrase">H<i>e</i>r<i>e</i> are som<i>e</i> words</span>

.phrase i {
    font-style: normal; /* Because I is italic by default */
    color: red;
}

$(document).ready(function() {
   console.log( "ready!" );
   var text = $("#phrase").html().replace(/e/g, '<span class="red">e</span>');
    $("#phrase").html(text)
});

var s1 = document.getElementById("phrase");
var str = s1.innerHTML;
var newText = "";
for (var i = 0; i < str.length; i++) {
     if (str[i] == 'e') {
     newText+= str.charAt(i).fontcolor("red");
     }
     else {
        newText += str[i];
    }
}
s1.innerHTML = newText;