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

Question

我想知道如何<p>使用 Javascript 循环更改标签中单词最后一个字符的颜色。在下面的示例中，我想更改单词“John”中的“n”、“Jacques”中的“s”、“Peter”中的“r”等的颜色。

<section>

   <h1>Name</h1>

   <p>John</p>

   <p>Jacques</p>

   <p>Peter</p>

   <p>Robert</p>

</section>

Answer 1

你可以做：document&nbsp; .querySelectorAll('#pColors p')&nbsp; .forEach(p => {&nbsp; &nbsp; const len = p.innerText.length - 1&nbsp; &nbsp; p.innerHTML = `${p.innerText.slice(0, len)} <span class="red">${p.innerText[len]}</span>`&nbsp; }).red { color: red; }<section id="pColors">&nbsp; &nbsp;<h1>Name</h1>&nbsp; &nbsp;<p>John</p>&nbsp; &nbsp;<p>Jacques</p>&nbsp; &nbsp;<p>Peter</p>&nbsp; &nbsp;<p>Robert</p></section>

Answer 2

这样的事情应该工作：document.querySelectorAll('p').forEach(el => {&nbsp; const prefix = el.innerText.substr(0, el.innerText.length - 1);&nbsp; const suffix = el.innerText.substr(el.innerText.length - 1);&nbsp; el.innerHTML = `${prefix}<span class="colored">${suffix}</span>`;})使用document.querySelectorAll我们选择<p>页面上的所有标签。然后我们循环NodeList使用 using NodeList#forEach。对于每次迭代，我们挑选出除最后一个字符之外的所有字符，然后挑选出最后一个字符。最后，我们innerHTML使用模板字符串重构元素的内容，并将单个字符包装在<span>.此代码假设您的 CSS 如下所示：.colored {&nbsp; color: red;}document.querySelectorAll('p').forEach(el => {&nbsp; const prefix = el.innerText.substr(0, el.innerText.length - 1);&nbsp; const suffix = el.innerText.substr(el.innerText.length - 1);&nbsp; el.innerHTML = `${prefix}<span class="colored">${suffix}</span>`;}).colored {&nbsp; color: red;}<section>&nbsp; &nbsp;<h1>Name</h1>&nbsp; &nbsp;<p>John</p>&nbsp; &nbsp;<p>Jacques</p>&nbsp; &nbsp;<p>Peter</p>&nbsp; &nbsp;<p>Robert</p></section>

Answer 3

let list = ['John', 'Jacques', 'Peter', 'Robert'];for (let i = 0; i < list.length; i++) {&nbsp; let name = list[i];&nbsp; document.getElementById("list-container").innerHTML += `<p> ${name.substr(0, name.length - 1)}<span style="color: red">${name.charAt(name.length - 1)}<span><p>`}<div id="list-container"></div>