jQueryのtextメソッドとは？textメソッドの正しい使用方法を解説

.NET開発者のためのブログメディア

SE: textメソッドの機能について教えてください。

PM: textメソッドではHTML要素内のテキスト情報を取得することができるメソッドです。

jQueryのtextとは？

jQueryはJavaScriptで使える豊富な機能を持つライブラリです。jQueryのtextメソッドは、htmlタグのテキストを取得できる機能があります。この記事ではtextメソッドとそれに関連する情報をわかりやすく解説しましょう。

この記事のサンプルを実行する場合は、headタグに以下を記述してjQueryのライブラリを読み込んで下さい。なお以下の3.5.1が最新版とは限りませんが、古い版でも利用はできます。

HTMLのテキストとは？

jQueryのtextメソッドはHTMLタグのテキストを取得できますが、そもそもHTMLのテキストとは何なのでしょうか。以下のHTMLの「テキストタイトル」「本文」がテキストに該当します。

<h2>テキストタイトル</h2>
<p>本文</p>

jQueryのtextメソッドは、タグに囲まれた中の文字情報を取得できるということです。

テキストを取得するサンプル

以下は上のHTMLのテキストをtextメソッドで取得するサンプルです。

$(document).ready(function(){
var text1 = $(‘h2’).text();
var text2 = $(‘p’).text();

console.log(text1);
console.log(text2);
});

jQueryではdocument、’h2’、’p’をセレクタ、readyやtextをメソッドと言います。$(document).ready(function(){～});は、ドキュメント全体が読み込まれたらfunctionの処理を実行すると言う意味です。

textメソッドによるタグのテキストの取得

readyが指定したfunctionの中では、セレクタでタグ名を指摘して、textメソッドでtext1とtext2という変数に取得した内容を代入しています。それをconsole.logでログ出力します。ログを見る方法は、Google Chromeの場合は対象のページの表示中にF12キーを押して、DevToolsのConsoleタブを選択すると見られます。

実行するとログには以下のように出力されます。textメソッドでタグで囲まれたテキストが取得できていることがわかります。

テキストタイトル
本文

複数のテキストを取得

textメソッドは複数の要素も取得することができます。ここまでのタグを以下のようにdivタグで囲いましょう。
<div>
<h2>テキストタイトル</h2>
<p>本文</p>
</div>

jQueryでdivタグのテキストを取得します。

$(document).ready(function(){
var text = $(‘div’).text();
console.log(text);
});

ログは以下のようになります。複数のテキストがまとめられて1つの文字列になっていることに注意してください。

テキストタイトル
本文

textメソッドはテキストの更新もできる

textメソッドは取得だけでなく、テキストの更新もできます。ここまでのHTMLに対し、

$(‘h2’).text(‘差し替えたタイトル’);

のようにパラメータに文字列を指定することで、テキスト内容の変更ができます。またテキストを新しく追加することもできます。タグが以下のように空になっているとして、

以下のように記述することで、

$(‘div’).text(‘DIVタグのテキスト’);

以下のようにテキストを追加できます。

<div>DIVタグのテキスト</div>

textメソッドではタグは追加できない

textメソッドでテキストの追加を行う場合に注意する点は、タグの追加はできないということです。例えば以下のように文字を太くするbタグを追加しようとしても、

$(‘p’).text(‘<b>太文字になるかな？</b>’);

ブラウザには以下のようにそのまま表示されるだけです。タグがエスケープされて普通の不等号として表示されてしまうということです。

<b>太文字になるかな？</b>

タグを追加するならhtmlメソッドかappendメソッド

テキストだけでなくタグも追加したい場合は、htmlメソッドを使用します。以下のようにすれば、

$(‘p’).html(‘<b>太文字になるかな？</b>’);

太文字になるかな？

のように太文字になります。なおappendというメソッドもあって、

$(‘p’).append(‘<b>太文字になるかな？</b>’);

とすると、

本文太文字になるかな？

となります。htmlは差し替え、appendは追加というわけです。上手く使い分けましょう。

フォームのテキストを取得するには？

textメソッドで以下のようなフォームのテキストを取得できるでしょうか。

jQueryは以下のようにします。

$(document).ready(function(){
var text = $(‘input’).text();
console.log(text);
});

実行しても、ログには何も表示されません。textメソッドではinputタグなどのフォームのvalue属性の値は取得できないのです。なおvalue属性を取得するには以下のようにvalメソッドを利用します。

var text = $(‘input’).val();

ドロップダウンメニューのテキストを取得

textメソッドはドロップダウンメニュー（selectタグ）のテキストを取得するのにも便利に使えます。htmlが以下のようになっているとします。

jQueryは以下のようにします。

$(document).ready(function(){
$(‘select’).change(function(){
var text = $(‘option:selected’).text();
console.log(text);
})
});

selectタグにはtextメソッドが欠かせない

$(‘select’).changeはselectタグに変化が起こった時に呼ばれます。この場合、ドロップダウンメニューの項目を選んだ時です。functionが実行され、その中では$(‘option:selected’).text()でテキストの値を取得しています。:selectedで選択されたoptionタグを選べるわけです。

実行すると、ログに選択した箇所のテキストが表示されます。jQueryでselectタグを処理する場合、textメソッドは必須と言えるでしょう。