body内に書かれているテキストをJavaScriptで一文字ずつ取得したい！！！というニッチな要望に応える記事です。
たとえば？
<html>
<head>
<title>たとえば？</title>
</head>
<body>
たとえばこのように素のテキストや
<div>
いろんな要素が
<p>入れ子になっている<span>時</span>に</p>
特定の要素配下のテキストをすべて取得して
</div>
<div>
一文字ずつ
<p>"た" "と" "え" "ば" "こ" "の" ...</p>
と出力したい</br>
みたいな話です。
</div>
</body>
</html>
実装コードと出力結果
コード
//parent自身と自身の配下にあるノードすべてにcallbackをさせる
const makeChildrenToDo = (parent, callback) => {
const children = parent.childNodes;
//直下の子要素にこの関数を再帰的に適用する
children.forEach((child) => {
makeChildrenToDo(child, callback);
});
callback(parent);
}
//element直下にあるテキストを一文字ずつ出力する
const logText = (element) => {
const nodeValue = element.nodeValue;
//elementがnodeとしては#textであり、truthyであり、空白文字ではない
if (element.nodeName === "#text" && nodeValue && nodeValue.match(/\S/g)) {
const characters = Array.from(nodeValue);
characters.map((chara) => {
//charaがtruthyであり、空白文字でない
if (chara && chara.match(/\S/g)) {
console.log(chara);
}
});
}
}
const main = () => {
makeChildrenToDo(document.body, logText);
}
window.onload = main;
コードをheadに入れて読み込んだ時の出力結果
た
と
え
ば
こ
の
(略)
話
で
す
。
body内のテキストが一文字ずつ出力される。