DOM Traversalで子タグにネストされていないテキストを取得する

2024-04-02

jQueryを使用して、子タグにネストされていないテキストのみを取得する

<div id="container">
  <h1>タイトル</h1>
  <p>これは段落です。<strong>太字</strong>テキストも含まれています。</p>
  <ul>
    <li>リスト項目 1</li>
    <li>リスト項目 2</li>
  </ul>
</div>

説明

以下のコードは、#container 内の 子タグにネストされていないテキストのみ を取得し、コンソールに出力します。

// 子タグにネストされていないテキストのみを取得
const text = $('#container').contents().filter(function() {
  return this.nodeType === Node.TEXT_NODE;
}).text();

// 取得したテキストをコンソールに出力
console.log(text);

このコードは、以下の手順で動作します。

$('#container') で #container 要素を取得します。
.contents() メソッドを使用して、#container 内のすべての子要素を取得します。
.filter() メソッドを使用して、Node.TEXT_NODE 型の要素のみを抽出します。
.text() メソッドを使用して、抽出された要素のテキスト内容を取得します。

結果

上記のコードを実行すると、以下のテキストがコンソールに出力されます。

これは段落です。太字テキストも含まれています。
リスト項目 1
リスト項目 2

nodeType プロパティは、要素の種類を表す数値です。Node.TEXT_NODE は、テキストノードを表します。
.filter() メソッドは、条件に合致する要素のみを抽出する関数です。

応用例

記事の見出しのみを取得する

リスト項目のテキストのみを取得する

子要素にネストされたテキストを除去する

jQueryを使用して、子タグにネストされていないテキストのみを取得する方法を理解しました。この方法は、様々な場面で役立ちます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryサンプル</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div id="container">
    <h1>タイトル</h1>
    <p>これは段落です。<strong>太字</strong>テキストも含まれています。</p>
    <ul>
      <li>リスト項目 1</li>
      <li>リスト項目 2</li>
    </ul>
  </div>
  <script>
  // 子タグにネストされていないテキストのみを取得
  const text = $('#container').contents().filter(function() {
    return this.nodeType === Node.TEXT_NODE;
  }).text();

  // 取得したテキストをコンソールに出力
  console.log(text);
  </script>
</body>
</html>

これは段落です。太字テキストも含まれています。
リスト項目 1
リスト項目 2

説明

$(document).ready(function() { で、DOMContentLoaded イベントが発生した時に処理を実行します。
$('#container').contents().filter(function() { で、#container 内のすべての子要素を取得し、Node.TEXT_NODE 型の要素のみを抽出します。
console.log(text); で、取得したテキストをコンソールに出力します。

上記のコードは、jQuery ライブラリが必要です。

応用例

子タグにネストされていないテキストを取得する他の方法

JavaScript

// 子タグにネストされていないテキストを取得
const text = document.getElementById('container').textContent;

// 取得したテキストをコンソールに出力
console.log(text);

document.getElementById('container') で #container 要素を取得します。
.textContent プロパティを使用して、要素のテキスト内容を取得します。

DOM Traversal

// 子タグにネストされていないテキストを取得
function getText(element) {
  if (element.nodeType === Node.TEXT_NODE) {
    return element.textContent;
  }

  let text = '';
  for (const child of element.childNodes) {
    text += getText(child);
  }
  return text;
}

const text = getText(document.getElementById('container'));

// 取得したテキストをコンソールに出力
console.log(text);