將句子拆分為字母并向其添加動態類（該字母的位置）[javascript,regex]

我正在嘗試將一個句子/單詞拆分為單獨的字母，并且能夠使用以下代碼實作。

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>");

如果這種方式不可能，我可以通過其他方式來實作這一點。

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

您還必須使用某種回圈來添加字符索引

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>

uj5u.com熱心網友回復：

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

    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));

uj5u.com熱心網友回復：

您可以測驗此代碼：

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  ;     
}

標籤：javascript 正则表达式

上一篇：ReactAxiosfetchresponsewitherror物件作為React子物件無效

下一篇：滾動時將影像動態更改為rgb和灰度