使用 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

  .querySelectorAll('#pColors p')

  .forEach(p => {

    const len = p.innerText.length - 1

    p.innerHTML = `${p.innerText.slice(0, len)} <span class="red">${p.innerText[len]}</span>`

  })

.red { color: red; }

<section id="pColors">

   <h1>Name</h1>

   <p>John</p>

   <p>Jacques</p>

   <p>Peter</p>

   <p>Robert</p>

</section>

Answer 2

这样的事情应该工作：

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}<span class="colored">${suffix}</span>`;

})

使用document.querySelectorAll我们选择<p>页面上的所有标签。然后我们循环NodeList使用 using NodeList#forEach。对于每次迭代，我们挑选出除最后一个字符之外的所有字符，然后挑选出最后一个字符。最后，我们innerHTML使用模板字符串重构元素的内容，并将单个字符包装在<span>.

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

.colored {

  color: red;

}

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}<span class="colored">${suffix}</span>`;

})

.colored {

  color: red;

}

<section>

   <h1>Name</h1>

   <p>John</p>

   <p>Jacques</p>

   <p>Peter</p>

   <p>Robert</p>

</section>

Answer 3

let list = ['John', 'Jacques', 'Peter', 'Robert'];

for (let i = 0; i < list.length; i++) {

  let name = list[i];

  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>