今回の記事は、
- jQueryを使ってHTML要素のテキストを取得したい
- jQueryを使ってHTML要素のテキストを変更したい
- 素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない
という方に向けた記事になっています。
この記事の前半では「text()メソッドでテキストを取得・変更する方法」について解説しつつ、後半では「text()メソッドを使用する際の注意点」をご紹介させて頂きます。
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()メソッドを使用する際の注意点その１ 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()メソッドを使用する際の注意点その２ 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()メソッドでは実現し得ないこともあるということを認識しておき、その場合に適切なメソッドを使用できるようになっておきましょう。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
