【jQuery】text()メソッドでテキストを操作する方法

今回の記事は、

  • jQueryを使ってHTML要素のテキストを取得したい
  • jQueryを使ってHTML要素のテキストを変更したい
  • 素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない

という方に向けた記事になっています。

この記事の前半では「text()メソッドでテキストを取得・変更する方法」について解説しつつ、後半では「text()メソッドを使用する際の注意点」をご紹介させて頂きます。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

text()メソッドでテキストを取得する方法

まずは、text()メソッドでテキストを取得する方法について解説させて頂きます。

解説とはいえ、その使い方はとてもシンプルで、jQueryオブジェクトに対して直接text()メソッドを呼び出すだけで大丈夫です。

基本的な使い方

$(セレクタ).text()

それでは早速、実際のコードを見ながらその使い方を確認していきましょう。

実装コード

<p id="test-text1">テストテキストです</p>

<button onClick="checkText1()">テキストを表示</button>

<script>
function checkText1() {
  const text1 = $("#test-text1").text()
  console.log(text1)
}
</script>

出力結果

テストテキストです

動作確認用

テストテキストです

実際にディベロッパーツールのconsole画面を見ていただくと、「テストテキストです」と表示されているのがお分かりいただけるかと思います。

text()メソッドでテキストを変更する方法

続いては、text()メソッドでテキストを変更する方法をご紹介していきます。

こちらも使い方自体はとてもシンプルで、text()メソッドの引数に文字列を指定することで、元々のテキストをその文字列に変更することができます。

基本的な使い方

$(セレクタ).text("文字列")

それでは、実際のコードを見ながらその使い方を確認していきましょう。

実装コード

<p id="test-text2">テストテキストです</p>

<button onClick="changeText2()">テキストを変更</button>

<script>
function changeText2() {
  $("#test-text1").text("変更されたテキストです")
}
</script>

動作確認用

テストテキストです

上記のボタンを押していただくと、元々のテキスト(「テストテキストです」)が「変更されたテキストです」に変更されたのがご確認いただけたかと思います。

注意点としては、変更したいテキストを引数にとる、ということです。

Javascriptに限らず、その他の言語を使ってこられた方にとっては、思わず$(""セレクタ ).text() = "文字列"としてしまいがちですが、そこはグッと我慢して、文字列は引数に指定するようにしましょう。

text()メソッドを使用する際の注意点

ここまでご紹介してきたtext()メソッドですが、その使用にあたっては以下の注意点があります。

  • 1. inputタグの入力値は取得できない
  • 2. HTMLタグが自動的にエスケープされる

それぞれ順番に解説させていただきますね。

text()メソッドを使用する際の注意点その1 inputタグの入力値は取得できない

フォームなどで使用されるinputタグですが、その入力値を取得しようとしてtext()メソッドを使用すると何も返ってきません

これは、inputタグの中に入力された値は、そのinputタグの「テキスト」ではなく、「値(value)」として扱われるためです。

そのため、inputタグの入力値を取得する場合には、「text()メソッド」ではなく、「val()メソッド」を使用するようにしてください。

実装コード

<input id="test-input1" value="テストテキストです">

<button onClick="checkInput1()">入力値を表示</button>

<script>
function checkInput1() {
  const text = $("#test-input1").text()
  const value = $("#test-input1").val()
  
  console.log(text)
  console.log(value)
}
</script>

出力結果

// text()メソッドでは何も返ってきません
  
// val()メソッドを使用すると以下の値が返ってきます。
テストテキストです

動作確認用



  

上記のボタンを押していただくと、ディベロッパーツールのconsole画面には、空行と「テストテキストです」が表示されているかと思います。

このように、inputタグの入力値はval()メソッドでしか取得できませんのでご注意くださいね。

text()メソッドを使用する際の注意点その2 HTMLタグが自動的にエスケープされる

続いての注意点は、「HTMLタグが自動的にエスケープされる」という点です。

例えば、pタグの中にspanタグのテキストを挿入したい、という場合、以下のようにしてしまうと、<span>タグまで表示されてしまうのです。

実装コード

<p id="test-text4"></p>

<button onClick="insertText1()">テキストを挿入</button>

<script>
function insertText1() {
  $("#test-text4").text(<span>挿入されたテキストです</span>)
}
</script>

動作確認用

上記のボタンを押していただくと、<span>タグも表示されてしまうのがお分かりいただけるかと思います。

このように、タグを指定した上でテキストを表示したい場合には、html()メソッドを使用します。

html()メソッドであればタグを認識した上でテキストを表示してくれます。

実装コード

<p id="test-text5"></p>

<button onClick="insertText2()">テキストを挿入</button>

<script>
function insertText2() {
  $("#test-text5").html(<span>挿入されたテキストです</span>)
}
</script>

動作確認用

今度は<span>タグは表示されず、テキストだけが表示されているのがお分かりいただけるかと思います。

このように、タグの種類を指定した上でテキストを扱いたい場合には、html()メソッド を使用するようにしましょう。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryのtext()メソッドを使ってHTML要素のテキストを操作する方法について解説してきましたがいかがでしたか?

使い方自体はとてもシンプルですが、text()メソッドでは実現し得ないこともあるということを認識しておき、その場合に適切なメソッドを使用できるようになっておきましょう。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。