jQuery / メソッド / .text() - 要素のテキストを取得・置換する

jQueryの.text()は、選択した全要素とその子孫のテキストを結合した文字列を返します。.text(value)は各要素の内部をそのテキストに置換し、HTMLタグとして解釈しません。複数要素の結果を分けたい場合は、一括の.text()ではなく各要素を読み配列に集めます。

取得範囲とhtml・valを区別する

.text()の取得は最初だけでなく選択集合全体が対象です。タグ表記は含めず子孫のテキストは含めますが、要素間の区切りは自動追加しません。画面に見えている内容だけを抽出する機能ではありません。

.html()はタグ構造、.val()は入力欄の現在値を扱います。inputの現在値を.text()で読まないようにします。.text()はHTML文書だけでなくXML文書のテキストにも使えます。

結合結果と要素別結果を比較する

全コードをUTF-8のtext-demo.htmlとして保存し、ブラウザーで開きます。コンテンツ配信ネットワーク（CDN）から公式jQueryファイル4.0.0を読むインターネット接続が必要ですが、インストールは不要です。取得・設定・関数型接頭辞・空化・初期化と以下のコンソール例を3.7.1と4.0.0で実行しました。

最初の段落にはAlphaとhiddenで隠したHidden、二つ目にはBetaがあります。JSON.stringify()で文字列境界と空値を明示します。perItemは.map()で個別に読み、.get()で通常配列にした結果です。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read and replace text contents</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, input { font: inherit; margin: 4px; max-width: 100%; }
    .item { border: 2px solid teal; padding: 16px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Plain text from multiple elements</h1>
  <label>Value <input id="value" value="&lt;em&gt;Hello&lt;/em&gt;"></label>
  <button type="button" id="set">Set text</button>
  <button type="button" id="prefix">Prefix each item</button>
  <button type="button" id="clear">Clear text</button>
  <button type="button" id="read">Read</button>
  <button type="button" id="reset">Reset</button>
  <div id="items"><p class="item"><strong>Alpha</strong><span hidden>Hidden</span></p><p class="item">Beta</p></div>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const $items = $("#items > .item");
      const initial = $items.get().map(node => node.innerHTML);
      function report() {
        const combined = $items.text();
        const perItem = $items.map(function () { return $(this).text(); }).get();
        $("#result").text(`combined=${JSON.stringify(combined)}\nper item=${JSON.stringify(perItem)}\nitems=${$items.length}`);
      }
      $("#set").on("click", function () { $items.text($("#value").val()); report(); });
      $("#prefix").on("click", function () {
        $items.text(function (index, oldText) { return (index + 1) + ". " + oldText; });
        report();
      });
      $("#clear").on("click", function () { $items.text(""); report(); });
      $("#read").on("click", report);
      $("#reset").on("click", function () {
        $items.html(function (index) { return initial[index]; });
        $("#value").val("<em>Hello</em>");
        report();
      });
      report();
    });
  </script>
</body>
</html>

初期結果は次のとおりです。

combined="AlphaHiddenBeta"
per item=["AlphaHidden","Beta"]
items=2

1. Readでも同じ結果です。Hiddenは非表示ですが、combinedと最初の配列項目に含まれます。
2. Prefix each itemはindex・oldTextから1. AlphaHiddenと2. Betaを作ります。strongと隠れたspanはテキストに置換されます。
3. Reset後にSet textを押すと、両段落に<em>Hello</em>が文字として表示され、em要素はできません。
4. Valueを変えて再実行します。入力は.val()で読み、先頭・末尾の空白も文字列内に残ります。
5. Clear textは.text("")です。combinedは空文字、per itemは空文字二つで、段落数は2のままです。
6. Resetは保存したHTMLと入力値を戻します。接頭辞操作は現在のテキストに繰り返し追加するため、同じ初期条件の比較では先にResetします。

空白・隠れた内容・書式の消失

要素間に空白が自動追加されないためcombinedはAlphaHiddenBetaです。境界が必要ならperItem配列を維持するか、必要な区切りでjoinします。DOM（Document Object Model、文書オブジェクトモデル）内の空白・改行とブラウザーの解析差も結果に影響します。

ネイティブのtextContentも表示スタイルと独立したテキストを扱い、innerTextとは異なります。非表示部分を除きたいなら、含める要素を先に決めます。可視性を無視した大きなコンテナーの取得を、読者が見る文字と同一視しません。

.text(value)は既存構造へ文字を追記するだけではありません。子タグを置換するので、アイコン・リンク・ボタンを持つ親全体に使うとそれらも消えます。維持したい子があるならラベル専用spanなどに更新範囲を絞ります。

0・false・空の選択と文字通りの値

次の完全な部分コードを開発者ツールのConsoleで実行します。一時divを挿入せずに値を変え、最後に整理します。数値と真偽値はテキストになり、&はHTML実体参照として解釈されず元の文字列のままです。

const $box = $("<div>A <span>B</span> C</div>");
console.log(`spaces=${JSON.stringify($box.text())}`);
$box.text(0);
console.log(`number=${JSON.stringify($box.text())}`);
$box.text(false);
console.log(`boolean=${JSON.stringify($box.text())}`);
$box.text("&amp;");
console.log(`entity characters=${JSON.stringify($box.text())}`);
console.log(`empty selection=${JSON.stringify($().text())}`);
$box.remove();

spaces="A B C"
number="0"
boolean="false"
entity characters="&"
empty selection=""

空の選択の.text()は空文字です。要素が存在して中身だけ空の場合も同じなので、存在確認には.lengthを使います。0やfalseを無条件のvalue || ""で欠損扱いしないよう注意します。

.text()の通常文字列はこの表示経路でタグとして実行されません。ただし結果を後で.html()へ渡すのは別のHTML解釈です。.text()をHTML無害化処理と見なさず、文字として見せる値はテキストで扱い続けます。期待と違う場合は範囲・子孫・区切り・フォームの.val()・Consoleエラーを確認します。