使用javascript循环更改单词最后一个字符的颜色

我想知道如何使用Javascript循环更改

标记中单词最后一个字符的颜色。在下面的例子中，我想改变单词“John”中“n”的颜色，“Jacques”中“s”的颜色，“Peter”中“r”的颜色，等等

名称
约翰

雅克

彼得

罗伯特

类似的方法应该可以：

document.querySelectorAll（'p'）.forEach（el=>{
const prefix=el.innerText.substr（0，el.innerText.length-1）；
const suffix=el.innerText.substr（el.innerText.length-1）；
el.innerHTML=`${prefix}${suffix}`；
})

使用

document.querySelectorAll

我们选择页面上的所有

标记。然后，我们使用

NodeList#forEach

在

NodeList

上循环。对于每个迭代，我们挑选出除最后一个字符以外的所有字符，然后挑选出最后一个字符。最后，我们使用

innerHTML

重构元素的内容，并使用模板字符串将单个字符包装在

中

此代码假设您的CSS如下所示：

.colored{
颜色：红色；
}

document.querySelectorAll（'p'）.forEach（el=>{
const prefix=el.innerText.substr（0，el.innerText.length-1）；
const suffix=el.innerText.substr（el.innerText.length-1）；
el.innerHTML=`${prefix}${suffix}`；
})

.colored{
颜色：红色；
}

名称
约翰

雅克

彼得

罗伯特

let list=[“约翰”、“雅克”、“彼得”、“罗伯特”]；
for（设i=0；i

您可以执行以下操作：

文档
.querySelectorAll（“#pColors p”）
.forEach（p=>{
const len=p.innerText.length-1
p、 innerHTML=`${p.innerText.slice（0，len）}${p.innerText[len]}`
})

.red{color:red；}

名称
约翰

雅克

彼得

罗伯特

您也可以使用CSS来实现这一点

p:：之后{
内容：attr（数据端）；
颜色：红色；
}

名称
Joh
雅克

皮特

罗伯

对于现实世界的用户，如果没有transpiler（我猜OP没有使用transpiler），

forEach

在

NodeList

原型中并不总是可用。也不是模板文本。不幸的是，IE 11仍在使用中……这将破坏段落中可能存在的任何元素。考虑在TeNeal节点上工作，或者始终使用InNelHTML。我只是离开了提供的代码示例。解释很好。因此，一个工作片段。我为你做了一个。这是一个糟糕的解决方案，因为易访问性的原因。

<section>
   <h1>Name</h1>

   <p>John</p>
   <p>Jacques</p>
   <p>Peter</p>
   <p>Robert</p>
</section>