【jQuery】text()でテキストを設定・取得する完全ガイド｜html()との違い・XSS対策・複数要素・val()との使い分けまで

jQueryの text() メソッドは要素のテキストコンテンツを取得・設定します。似たメソッドの html()・val() と混同しやすいですが、用途が異なります。この記事ではtext()の基本・html()との違い・XSS対策・複数要素への一括適用・val()との使い分けまで解説します。

text() の基本的な使い方

$(function () {
  // テキストを取得
  var text = $('#title').text();
  console.log('テキスト:', text); // HTMLタグなしの純テキスト

  // テキストを設定
  $('#title').text('新しいタイトル');

  // テキストをクリア
  $('#message').text('');

  // 関数で設定（現在値を参照できる）
  $('.price').text(function (i, currentText) {
    // 例: 「¥1000」→「¥1,000」に変換
    var num = parseInt(currentText.replace(/[^0-9]/g, ''), 10);
    return '¥' + num.toLocaleString();
  });
});

text() / html() / val() の違い

// text() vs html() の違い
var userInput = '<script>alert("xss")<\/script>';

// text(): HTMLタグをエスケープして安全に表示
$('#safe').text(userInput);
// → &lt;script&gt;alert...&lt;/script&gt; として表示される

// html(): HTMLとして解釈（危険！ユーザー入力には使わない）
// $('#unsafe').html(userInput); // XSS脆弱性

複数要素のテキストを扱う

$(function () {
  // 全ての .label 要素に同じテキストを設定
  $('.label').text('更新済み');

  // 複数要素のテキストをまとめて取得（全テキストが結合される）
  var allText = $('li').text();
  console.log('全liのテキスト:', allText); // 全liのテキストが連結

  // 個別に処理するには each() を使う
  $('li').each(function () {
    console.log($(this).text());
  });

  // テキストの一覧を配列で取得
  var texts = $('li').map(function () {
    return $(this).text();
  }).get();
  console.log('テキスト配列:', texts);
});

HTMLエンティティの扱い

$(function () {
  // 設定時: text()はHTMLエンティティをエスケープする
  $('#el').text('A & B < C'); // → A &amp; B &lt; C として表示

  // 取得時: text()はHTMLエンティティをデコードして返す
  // 要素内が「&lt;div&gt;」の場合
  var raw = $('#el').text(); // → '<div>' (デコードされた値)
  var html = $('#el').html(); // → '&lt;div&gt;' (エンティティのまま)

  // 文字列をエスケープしてHTMLに埋め込む（text()の内部処理と同等）
  function escapeHtml(str) {
    return $('<div>').text(str).html();
  }
  console.log(escapeHtml('<script>')); // → &lt;script&gt;
});

val()との使い分け

$(function () {
  // input/textarea/select の値は val()
  var inputValue = $('input').val();
  $('input').val('新しい値');

  // div/p/span などのテキストは text()
  var labelText = $('label').text();
  $('span').text('更新');

  // 間違いやすい例
  $('input').text('xxx'); // → inputのDOMに.textContent設定されるが機能しない
  $('div').val();        // → undefined が返る（フォーム要素ではない）
});

まとめ

jQueryのtext()のポイントをまとめます。

• 取得: $("el").text() → HTMLタグなしの純テキスト（エンティティはデコード）
• 設定: $("el").text("新テキスト") → HTMLをエスケープして安全に表示
• ユーザー入力の表示は必ず text()（html() はXSS危険）
• フォームの値は val()・テキストノードは text()

関連記事: attr()とprop()の違い・完全ガイド / 要素を別の要素に置き換える完全ガイド

よくある質問（FAQ）