.net column

.NET開発者のためのブログメディア
データの表示

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

2021年01月13日

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

PM
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メソッドは、タグに囲まれた中の文字情報を取得できるということです。

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

以下は上の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></div>

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

$(‘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メソッドで以下のようなフォームのテキストを取得できるでしょうか。


<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メソッドはドロップダウンメニュー(selectタグ)のテキストを取得するのにも便利に使えます。htmlが以下のようになっているとします。



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

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

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

jQueryのtextメソッドはWeb開発の基本

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)