.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryのtextメソッドでテキストを取得する方法|注意点も解説

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

  • Javascript
  • jQuery
  • プログラミング言語
公開日時:   更新日時:
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が以下のようになっているとします。

    <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メソッドを活用してください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job