JavaScriptでテキストを一文字ずつ分割。

2023.05.18 / Labs

JavaScript

JavaScriptでテキストを一文字ずつ分割するためのスクリプトです。

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

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”})とパラメータを与えることで任意のタグを反映できます。

JavaScript

text = (!text.match(/[\s　]/)) ? "<"+tag+">"+text+"</"+tag+">" : text;

1

text = (!text.match(/[\s　]/)) ? "<"+tag+">"+text+"</"+tag+">" : text;

上記の「!text.match(/[\s　]/)」の箇所で、半角スペースと全角スペースは対象外としています。