スライドショー

jQueryのtext()によるテキスト操作まとめ!

こんにちは、ライターのマサトです!

今回は、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>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<script>
    const li = $('li').text();

    console.log( li );
</script>
</body>

実行結果

項目1項目2項目3

この例では、あらかじめリスト要素が配置されています。そこで、このリスト要素に対して「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()」を使った基本から応用技までを次の記事で詳しくまとめているので、ぜひ参考にしてみてください!

jQueryのhtml()で追加・取得・書き換えの方法まとめ!
更新日 : 2019年5月28日

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()メソッドを使う

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説