将句子拆分成字母，并在其中添加动态类(该字母的位置)

Question

我试图将一个句子/单词分割成不同的字母，并能够使用下面的代码。

​

var textWrapper = document.getElementById("heading");
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

<h1 class="heading" id="heading">
 Hello!
</h1>

​

输入

<h1> Hello! </h1>

我从这个得到了什么

<h1>
 <span class="letter">H</span>
 <span class="letter">e</span>
 <span class="letter">l</span>
 <span class="letter">l</span>
 <span class="letter">o</span>
 <span class="letter">!</span>
</h1>

我想要什么

<h1>
  <span class="letter-1">H</span>
  <span class="letter-2">e</span>
  <span class="letter-3">l</span>
  <span class="letter-4">l</span>
  <span class="letter-5">o</span>
  <span class="letter-6">!</span>
</h1>

我怎样才能做到这一点呢？

textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter-{what should I do here?}'>$&</span>");

如果这是不可能的，我可以用其他的方法来实现这一点。

Answer 1

如果您真的想为此使用regex，您可以传回到replace()，并在整个字符串中访问匹配的match和offset。

​

var textWrapper = document.getElementById('heading');
textWrapper.innerHTML = textWrapper.textContent.replace(
  /\S/g,
  (match, offset) => `<span class='letter_${offset}'>${match}</span>`
);

console.log(textWrapper.outerHTML);

<h1 class="heading" id="heading">
 Hello!
</h1>

​

如果您不想依赖于offset，而是想要一个受控计数器，您可以在这里使用闭包增加自己的计数器

((c)=>(match) => `<span class='letter_${c++}'>${match}</span>`)(1)

​

var textWrapper = document.getElementById('heading');
textWrapper.innerHTML = textWrapper.textContent.replace(
  /\S/g,
  ((c) => (match) => `<span class='letter_${c++}'>${match}</span>`)(1)
);

console.log(textWrapper.outerHTML);

<h1 class="heading" id="heading">
 Hello!
</h1>

​

Answer 2

我在regex方面没有任何知识，所以我会这样做

    const heading = document.getElementById("heading");
    const letters = heading.innerText.split("").map((letter, index) => {
      const span = document.createElement("span");
      span.innerText = letter;
      span.classList.add("letter-" + (index + 1));
      return span;
    });
    heading.innerHTML = "";
    letters.forEach((span) => heading.appendChild(span));

Answer 3

您还必须使用某种循环来添加字符索引。

​

var textWrapper = document.getElementById( "heading" );
// `<span class='letter-${++index}'>$&</span>`
const text = textWrapper.textContent.trim();
textWrapper.innerHTML = "";

text.split("").forEach((char, i) => {
  const span = document.createElement("span");
  span.classList.add(`letter-${i + 1}`);
  span.textContent = char;
  textWrapper.appendChild(span);
})

  <h1 class="heading" id="heading">
    Hello!
  </h1>

​