こんにちは、ライターのマサトです！
今回は、jQueryから特定のHTML要素内にあるテキスト情報を取得・変更できる「text()」について学んでいきましょう！
この記事では、
- 「text()」とは？
- テキストの取得
- テキストの追加・変更
- 複数のテキストを取得
- 「text()」のエスケープについて
- 「text()」と「html()」の違い
- input要素にtext()は使えない？
- selectタグの値を取得する
などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、「text()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「text()」とは？
それでは、まず最初にtext()メソッドについて基本的な知識から身につけていきましょう！
「text()」は、HTML要素内にあるテキスト情報を取得・追加・変更することが可能なメソッドになります。例えば、次のHTMLを見てください！
<div>
<h1>タイトル</h1>
<p>こんにちは</p>
</div>
h1タグには「タイトル」というテキスト情報があり、pタグには「こんにちは」というテキスト情報が存在しています。このようなテキスト情報を「text()」メソッドを使うことで、取得・追加・変更することが出来るというわけです。
ちなみに、divタグを対象にすると「タイトル」「こんにちは」の両方のテキスト情報が扱えるという点も覚えておきましょう！
本記事では、「text()」の基本から応用技まで1つずつ詳しく解説していきますので、ぜひ参考にしてみてください！
テキストの取得
ここからは、「text()」メソッドを使って実際にプログラミングを学んでいきましょう！
まずは、HTML要素内にあるテキスト情報を取得することから始めます。一般的な記述方法としては、【 対象要素.text() 】のように取得したい要素に直接text()を実行するだけです。次のサンプル例を見てください！
<body>
<h1>タイトル</h1>
<p>こんにちは</p>
<script>
const h1 = $('h1').text();
const p = $('p').text();
console.log( h1 );
console.log( p );
</script>
</body>
実行結果
タイトル こんにちは
この例では、h1 / pタグがそれぞれ配置されています。これらの要素を対象にして「text()」を実行すれば、それぞれが保持しているテキスト情報を取得することができるのです。
実行結果には、h1 / pタグのテキスト情報が見事に出力されているのが分かりますね。
テキストの追加・変更
「text()」は取得だけでなく、あとからテキスト情報を追加・変更することも可能です。この場合は、【 対象要素.text( テキスト情報 ) 】のように引数へ追加・変更したいテキスト情報を指定すればOKです。次のサンプル例を見てください！
<body>
<p></p>
<script>
$('p').text('こんにちは');
</script>
</body>
実行後のHTML
<p>こんにちは</p>
この例では、テキスト情報をまったく持たないp要素が配置されていますね。このp要素に対して、「text(‘こんにちは’)」と記述することで「こんにちは」というテキストを追加することが可能です。
実行後のHTMLを見てみると、p要素の中身にテキスト情報が付与されているのが分かりますね。さらに、あとから特定の要素へ「text()」を使ってテキスト情報を変更することも可能です！
<body>
<p>こんにちは</p>
<script>
$('p').text('おはよう');
</script>
</body>
実行後のHTML
<p>おはよう</p>
この例では、あらかじめ「こんにちは」という文字列が付与されたp要素が配置されています。このp要素に対して、「text(‘おはよう’)」と記述すれば「おはよう」というテキストが上書きされて変更することが可能です！
実行後のHTMLを見てみると、「こんにちは」から「おはよう」に変更されているのが分かります。
複数のテキストを取得
「text()」は対象となる要素が複数ある場合、まとめてテキスト情報を取得できる性質を持っています。例えば、リスト要素などが複数ある場合もすべてのテキスト情報を簡単に取得できるわけです。次のサンプル例を見てください！
<body>
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
<script>
const li = $('li').text();
console.log( li );
</script>
</body>
実行結果
項目１項目２項目３
この例では、あらかじめリスト要素が配置されています。そこで、このリスト要素に対して「text()」を実行するだけですべてのli要素のテキスト情報が取得できます。実行結果を見ると各リスト要素のテキスト情報がすべて出力されていますよね。
注意するポイントは、すべてのテキストが1つの文字列となって取得されるので、改行などは一切入らないという点です！
「text()」のエスケープについて
「text()」の引数に文字列を指定すると、テキスト情報を追加・変更できますが「HTMLタグ」は認識されません。つまり、HTMLタグは自動的にエスケープされて、単純な文字列として認識されるという意味になります。
この性質を理解するために、次のサンプル例を見てください！
<body>
<div></div>
<script>
$('div').text('<p>こんにちは</p>');
console.log( $('div').text() );
</script>
</body>
実行結果
<p>こんにちは</p>
この例では、空のdiv要素があらかじめ配置されています。このdiv要素に対して、「text(‘<p>こんにちは</p>’)」と記述することでp要素を追加しようとしています。
しかしながら、この場合は「<p></p>」がp要素とは認識されずエスケープされて単純な文字列扱いになるわけです。最後にdiv要素内のテキスト情報を出力していますが、あくまで文字列の「<p></p>」であることが実行結果からも分かりますね。
「text()」と「html()」の違い
先ほど「text()」の引数にHTMLタグを記述してもエスケープされて文字列扱いになると解説しました。
しかし、「text()」とよく似たメソッドの「html()」だとエスケープされずにHTMLタグを追加することが可能なのです。次のサンプル例を見てください！
<body>
<div></div>
<script>
$('div').html('<p>こんにちは</p>');
console.log( $('div').text() );
</script>
</body>
実行結果
こんにちは
この例は、前章のtext()を「html()」に置き換えただけのサンプルです。注目すべきは実行結果です！
text()だと「pタグ」は認識されずに文字列扱いでしたが、今度は「pタグ」として認識されていますね。つまり、使い分けとしては次のようになります！
- 「text()」はテキスト情報を追加・変更する時に活用できる
- 「html()」は特定のHTML要素を追加・変更する時に活用できる
ちなみに、「html()」を使った基本から応用技までを次の記事で詳しくまとめているので、ぜひ参考にしてみてください！
input要素にtext()は使えない？
これまで「text()」を使ってHTML要素内のテキスト情報を取得・追加・変更してきました。ところが、フォームなどでよく使われるinput要素に関しては「text()」が使えません。
次のサンプル例を見てください！
<body>
<input type="text" value="こんにちは">
<script>
const result = $('input').text();
console.log( result );
</script>
</body>
この例では、value値が「こんにちは」と設定されているinput要素だけが配置されていますね。このinput要素に対して「text()」を実行しても、何のテキスト情報も取得できません。
この場合には、jQueryの標準で用意されている「val()」メソッドを次のように使いましょう！
const result = $('input').val();
text()の代わりに「val()」を使うことで、「こんにちは」というテキスト情報が取得できるわけです。フォーム要素を扱う場合には、特に注意して使い分けるようにしておきましょう！
selectタグの値を取得する
今度は、フォーム部品の「select要素」にあるテキスト情報を取得してみましょう！一般的にselect要素は、「optionタグ」の中にテキストを記述して複数の候補から選択できるようにします。そこで、任意のoption要素を選択したテキスト情報だけを出力してみます。
<body>
<select id="sample">
<option>おはよう</option>
<option>こんにちは</option>
<option>こんばんは</option>
</select>
<script>
$('select').change(function() {
const result = $('option:selected').text();
console.log( result );
})
</script>
</body>
実行結果
こんばんは
この例では、選択候補として3種類の文字列が設定されています。そこで「change()」イベントを使って、候補から1つ選択した時点で選んだ文字列を出力するようにしています。
選択した文字列は、「$(‘option:selected’).text()」のように記述することで選んだテキスト情報だけを取得できます。例えば、候補から「こんばんは」を選択すると実行結果のように文字列が出力されるというわけです！
まとめ
今回は、jQueryで特定のHTML要素のテキスト情報を取得・追加・変更できる「text()」について学習をしてきました！最後に、もう一度ポイントをおさらいしておきましょう！
- text()は特定のHTML要素内にあるテキスト情報を取得・追加・変更できる
- text()の引数にHTMLタグを記述してもエスケープされて単純な文字列になる
- html()の引数にHTMLタグを記述すればエスケープされずにタグとして認識される
- input要素のテキスト情報はtext()ではなくval()メソッドを使う
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
