1. ホーム
2. パソコン
3. javascript

【javascript】文字列を取得し、一文字ずつspanに挿入する方法

投稿日 : 2024年01月08日 更新日 :

やりたいこと

replaceを使う

<div class="text">gxy-life.com</div>

const text = document.querySelector(".text");
text.innerHTML = text.textContent.replace(/\S/g,"<span>$&</span>");

splitを使う

<div class="text">gxy-life.com</div>

展開

const text = document.querySelector(".text");
const texts = text.textContent;  //➀文字列を取得

text.textContent = "";  // ➁取得後文字列をいったん消去
textsArray = [];  // ➂空の配列を準備

// ➃文字数だけループ
for (let i = 0; i < texts.split("").length; i++) {  
  // ➄splitで分割し、空白以外の文字をspanに挿入
  const textT = texts.split("")[i];  
  if (textT === " ") {
    textsArray.push(" ");
  } else {
    textsArray.push("<span>" + textT + "</span>");
  }
}
// ➅配列の中のHTMLを最初の場所に格納
for (let i = 0; i < textsArray.length; i++) {
  text.innerHTML += textsArray[i];
}

splitのメリット

for (let i = 0; i < texts.split("").length; i++) {
  const textT = texts.split("")[i];
  if (textT === " ") {
    textsArray.push(" ");
  } else {
    textsArray.push('
    <span style="transition: 
    ' + (i * 0.1 + 0.3) + 's;">'
    + textT + "</span>");
  }
}

クリック

まとめ