jqueryでaタグのテキストを取得する方法まとめ【初心者向け】
jQueryを使ってaタグのテキストを取得する方法を、初心者にもわかりやすく解説します。text()メソッド、html()メソッドの違いや、特定の属性を持つaタグのテキスト取得など、様々なケースに対応したサンプルコード付きで解説します。
aタグのテキスト取得の基本
jQueryのtext()メソッドを使うと、aタグ内のテキストを取得できます。
<a href="#">リンクテキスト</a>
<script>
$(function(){
const linkText = $('a').text();
console.log(linkText); // 出力結果: "リンクテキスト"
});
</script>
上記のコードでは、$('a')でaタグの要素を取得し、text()メソッドでテキストを取得しています。
htmlタグを含む場合のテキスト取得
aタグ内にhtmlタグが含まれている場合、text()メソッドではタグを除いた純粋なテキストのみが取得できます。
<a href="#"><span>リンク</span>テキスト</a>
<script>
$(function(){
const linkText1 = $('a').text();
console.log(linkText1); // 出力結果: "リンクテキスト"
const linkText2 = $('a').html();
console.log(linkText2); // 出力結果: "<span>リンク</span>テキスト"
});
</script>
htmlタグを含めて取得したい場合は、html()メソッドを使用します。
特定の属性を持つaタグのテキストを取得
class名やid名など、特定の属性を持つaタグのテキストを取得することもできます。
<a href="#" class="sample-link">リンクテキスト1</a>
<a href="#">リンクテキスト2</a>
<script>
$(function(){
const linkText = $('.sample-link').text();
console.log(linkText); // 出力結果: "リンクテキスト1"
});
</script>
上記のコードでは、$('.sample-link')でclass名が"sample-link"のaタグの要素を取得し、text()メソッドでテキストを取得しています。
その他、id名で絞り込む場合は$('#sample-id')のように記述します。
よくある質問
- text()メソッドとhtml()メソッドの違いは何ですか？
- text()メソッドはタグを除いた純粋なテキストのみを取得します。html()メソッドはタグを含めたHTMLを取得します。
- 取得したテキストを使って何か操作をするにはどうすれば良いですか？
- 取得したテキストは変数に格納し、アラート表示や他の要素への反映など、様々な操作に利用できます。
<a href="#" id="sample-link">リンクテキスト</a> <p id="output"></p> <script> $(function(){ const linkText = $('#sample-link').text(); $('#output').text(linkText + 'をクリックしました'); }); </script>
まとめ
本記事では、jQueryを使ったaタグのテキスト取得方法について解説しました。text()メソッド、html()メソッドの違いや、特定の属性を持つaタグのテキスト取得など、様々なケースに対応できるようになりました。
より詳しくjQueryについて学びたい方は、以下のサイトも参考にしてみてください。
その他の参考記事:jquery href 取得