【javascript】文字列を取得し、一文字ずつspanに挿入する方法
やりたいこと
以下のように、文字列を取得し、 一文字ずつspanタグ
に挿入させたいと思います。
ここでは、replaceと
splitの2種類の方法を紹介します。
replaceを使う
<div class="text">gxy-life.com</div>const text = document.querySelector(".text");
text.innerHTML = text.textContent.replace(/\S/g,"<span>$&</span>");
文字列の最初から最後まで(g)、
空白以外の文字(/S)を検索し、
マッチしたもの($&)を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で分割し、空白以外の文字をspanに挿入
- 配列の中のHTMLを最初の場所に格納
splitのメリット
メリットとしては、1文字ずつアニメーションさせる時に変化を加えられることです。
以下のボタンをクリックしてみてください。
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>");
}
}gxy-life.com
まとめ
- replaceを使う(わずか2行で完成)
- splitを使う(複雑だが、1文字ずつ変化を加えられるメリットも)
