jQueryのtextメソッドでテキストを取得する方法｜注意点も解説

システム
エンジニア

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

プロジェクト
マネージャー

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

テキストの取得ができるjQueryのtextメソッドとは？

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

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

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

HTMLのテキストとは？

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

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

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

jQueryのtextメソッドでテキストを取得する方法4つ

jQueryのtextメソッドでテキストを取得する方法を紹介します。下記の4つについて紹介しています。

・textメソッドでテキストを取得する
・textメソッドで複数のテキストを取得する
・textメソッドでテキストの更新と追加をする
・textメソッドでドロップダウンメニューのテキストを取得する

1：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の処理を実行すると言う意味です。

テキストの取得結果

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

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

テキストタイトル
本文

2：textメソッドで複数のテキストを取得する

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

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

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

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

テキストタイトル
本文

3：textメソッドでテキストの更新と追加をする

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

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

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

<div></div>

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

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

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

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

4：textメソッドでドロップダウンメニューのテキストを取得する

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

No.1 No.2 No.3

<select id=”numbers”>
<option>No.1</option>
<option>No.2</option>
<option>No.3</option>
</select>

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メソッドは必須と言えるでしょう。

jQueryのtextメソッドでテキストを取得する際の注意点

jQueryのtextメソッドでテキストを取得する際の注意点を紹介します。ここでは、下記の2つを紹介します。

・タグは追加できない
・フォームのテキストは取得できない

タグは追加できない

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

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

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

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

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

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

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

太文字になるかな？

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

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

とすると、

本文太文字になるかな？

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

フォームのテキストは取得できない

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

<input type=”text” value=”フォームのテキスト”>

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

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

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

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

textメソッドとhtmlメソッドの使い分け方

textメソッドとhtmlメソッドの使い分け方を紹介します。textメソッドは、テキスト要素を書き換えます。htmlメソッドはHTML要素として追加します。

実行結果は以下のようになります。

See the Pen
jquery_rewrite_text8 by kskumd (@kskumd)
on CodePen.

システム
エンジニア

テキスト情報の取得のほかにどんなことができますか？

プロジェクト
マネージャー

ここでは紹介していませんが、追加や変更も可能です。

jQueryのtextメソッドでテキストを取得する方法を理解しよう

jQueryのtextメソッドについて紹介しましたが、ご理解頂けましたでしょうか。タグとタグの間のテキストを取得できるtextメソッドはWeb開発で利用する機会は多く、基本中の基本と言えるでしょう。この記事の内容をしっかり押さえてtextメソッドを活用してください。