JavaScriptでテキストを一文字ずつ分割。
JavaScriptでテキストを一文字ずつ分割するためのスクリプトです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function splitText(params = {}) { const tag = params.tag || "i"; document.querySelectorAll(".split-text").forEach((element_01) => { let content = ""; Array.from(element_01.childNodes).forEach((element_02) => { if (element_02.nodeType == 3) { element_02.textContent.trim().split("").forEach((text) => { text = (!text.match(/[\s ]/)) ? "<"+tag+">"+text+"</"+tag+">" : text; content += text; }); } else { content += element_02.outerHTML; } }); element_01.innerHTML = content; }); } |
あらかじめ対象のテキストには「split-text」というクラスをつけておいて、
splitText()を実行すると、一文字ずつタグで囲まれて分割されます。
囲むタグの変更には、splitText({tag:”span”})とパラメータを与えることで任意のタグを反映できます。
|
1 |
text = (!text.match(/[\s ]/)) ? "<"+tag+">"+text+"</"+tag+">" : text; |
上記の「!text.match(/[\s ]/)」の箇所で、半角スペースと全角スペースは対象外としています。