將句子拆分為字母並添加動態 class （該字母的位置）[ javascript，正則表達式]

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

您還必須使用某種循環來添加字符索引

 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>

Answer 2

如果您真的想為此使用正則表達式，您可以將回調傳遞給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 3

我對正則表達式的了解為零，所以我會怎么做

    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 4

您可以測試此代碼：

var content = document.getElementById('heading').innerHTML;
content = content.toString();
content = content.split();
document.getElementById('heading').innerHTML = '';
var cpt = 1;
for (let i = 0; i < content.length; i++) {
   const element = content[i];
    document.getElementById('heading').appendChild("<span class='letter-"+cpt+"'>"+element +"</span>"); 
cpt++;     
}