querySelectorAllとa[href]で正規表現を使って任意のリンクを取得する【JavaScript】

querySelectorAll-正規表現-リンク(href)の取得方法_eyecatch

JavaScriptのquerySelectorAll()でaタグのhref属性(リンク要素)を取得するためのサンプルコードをまとめました。

任意のリンク要素(URLのaタグ)を抜き出すにはa[href^="URL"]という感じの属性セレクタ(正規表現)を使えば結構いろいろできます。

また、querySelectorAllは:not()(否定擬似クラス)を使うこともできるので、特定の要素以外のリンクを指定して取得することも可能です。

属性セレクタを使うことで、idやclassが無くてもhref属性を抽出できます。

querySelectorAllでリンク(URL)のaタグを取得するコード

JavaScriptのquerySelectorAll()メソッドを使って、aタグのhref属性、つまりリンク要素を取得したい時によく使いそうなサンプルコードをまとめました。

リンク要素にidやclassを指定してquerySelectorAllを使うのも良いですが、href属性の中身はURL形式なので、正規表現(属性セレクタ)を使えば特定のURL要素のみを取得することもできます。

例えば、目次の実装時などに全てのアンカーリンクを取得する以下のコード

document.querySelectorAll('a[href^="#"]');

は有名ですが、この^=(前方一致)以外にも色々な正規表現があります。

当記事ではhref属性の取得時によく使いそうな属性セレクタとして、

  • 完全一致:a[href='URL']
  • 前方一致:a[href^='URL']
  • 部分一致:a[href*='URL']
  • 後方一致:a[href$='URL']
  • 特定要素除外:a[href]:not(a[href*='URL'])

の5つをご紹介します。
この指定方法で大体好きなhref属性(URL)が取得できることかと思います。

便利なので自分用のメモでもあります...では早速見ていきましょう・w・

完全一致:URLに一致するリンクを取得

//xxxに完全一致するhref属性を取得する
document.querySelectorAll("a[href='xxx']");

という風にa[href='URL']と指定することで、指定したURLに完全に一致したリンク要素のみを取得することが出来ます。「=」の部分が完全一致です。

コード例

<ul>
 <li><a href="https://www.google.com/?hl=ja">Google</a></li>
 <li><a href="https://www.youtube.com/">YouTube</a></li>
 <li><a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a></li>
 <li><a href="https://www.amazon.co.jp/">Amazon</a></li>
 <li><a href="http://twitter.com">Twitter</a></li>
</ul>

例えば上記のaタグ、URL群からyoutubeのリンク要素だけを取得したい場合は以下のようにします。

//https://www.youtube.com/に完全一致するノードを抽出
document.querySelectorAll("a[href='https://www.youtube.com/']");

これをChromeのデベロッパーツールで実際に実行した様子が以下です。

querySelectorAll-正規表現-リンク(href)の取得方法_001

少し分かりにくいですが、youtubeのリンク要素だけが取得できました。
このようにa[href='URL']で狙ったリンクのみを取得できます。

スポンサーリンク

前方一致:URLの前方に特定のxxがあるリンクを取得

続いて、前方一致のa[href^='URL']という属性セレクタを使い、URLの前方に任意の文字列があるリンク要素を取得する方法です。

//前方にxxxがあるhref属性を取得する
document.querySelectorAll("a[href^='xxx']");

「^=」が前方一致という指定で、xxxから始まる要素を取得したい時に便利です。

コード例

<ul>
 <li><a href="https://www.google.com/?hl=ja">Google</a></li>
 <li><a href="https://www.youtube.com/">YouTube</a></li>
 <li><a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a></li>
 <li><a href="https://www.amazon.co.jp/">Amazon</a></li>
 <li><a href="http://twitter.com">Twitter</a></li>
</ul>

例えば、上記のリンク群から「https://」から始まるリンク要素のみを取得したい時は以下のようにすればOKです。

//前方にhttps://があるノードを抽出
document.querySelectorAll("a[href^='https://']");

こちらもChromeで実行してみます。

querySelectorAll-正規表現-リンク(href)の取得方法_002
例のリンク群の中で唯一「http://」から始まるTwitterのURL(http://twitter.com)を除いた、4つのリンク(https://~)が取得できました。

アンカーリンクはこの前方一致a[href^='#']を使って#から始まるリンクだけを取得しているわけですね。

部分一致:URLの一部に特定文字を含むリンクを取得

href属性(URL)の中に特定の文字列を含むリンク要素を取得したい時は、部分一致を使ってa[href*='URL']という風に指定すればOK。

//URLの中にxxxを含むhref属性を取得する
document.querySelectorAll("a[href*='xxx']");

部分一致には「*=」という属性セレクタを使いましょう。

コード例

<ul>
 <li><a href="https://www.google.com/?hl=ja">Google</a></li>
 <li><a href="https://www.youtube.com/">YouTube</a></li>
 <li><a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a></li>
 <li><a href="https://www.amazon.co.jp/">Amazon</a></li>
 <li><a href="http://twitter.com">Twitter</a></li>
</ul>

例えば、例のリンク群から「google.com」を含んだリンク要素のみを取得したい時には以下のようにします。

//google.comを含むノードを抽出
document.querySelectorAll("a[href*='https://google']");

これをChromeで実行した結果は以下の通りです。

querySelectorAll-正規表現-リンク(href)の取得方法_003

href属性に「google.com」を含んだGoogleへのリンク要素だけが取得できました。
用途は限られますが、xxxを含む要素を取得したい時は部分一致のa[href*='URL']を使いましょう。

後方一致:URLの後方に特定のxxがあるリンクを取得

先ほどの前方一致(^=)の逆で、URLの後方に任意の文字列があるリンク要素を取得したい時は後方一致が使えます。後方一致はa[href$='URL']とすればOKです。

//URLの後方がxxxで終わるhref属性を取得する
document.querySelectorAll("a[href$='xxx']");

後方一致には「$=」という属性セレクタを使います。

コード例

<ul>
 <li><a href="https://www.google.com/?hl=ja">Google</a></li>
 <li><a href="https://www.youtube.com/">YouTube</a></li>
 <li><a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a></li>
 <li><a href="https://www.amazon.co.jp/">Amazon</a></li>
 <li><a href="http://twitter.com">Twitter</a></li>
</ul>

URLが「.jp/」で終わるリンク要素を取得したい時は以下のようにします。

// .jp/で終わるノードを抽出
document.querySelectorAll("a[href$='.jp/']");

これを実行してみると...

querySelectorAll-正規表現-リンク(href)の取得方法_004

ヤフー(https://www.yahoo.co.jp/)とアマゾン(https://www.amazon.co.jp/)の2つのリンク要素だけが抽出されます。

末尾がxxxで終わる要素を取得したい時は後方一致のa[href$='URL']が使えます。

特定要素除外:特定のリンクを除外したリンクを取得

最後に、特定のhref属性(URL)を除外して、それ以外のリンク要素を取得する方法です。querySelectorAllには要素除外の「:not」も使えます。

//特定のxxx以外の全てのhref属性を取得する
document.querySelectorAll("a[href]:not(a[href*='xxx'])");

CSSのスタイルを意図したところだけに当てるためにも使われる:not()ですが、これが使えます。a[href]:not(a[href*='URL'])とすれば特定のURLを除外しつつ、その他の全てのリンク要素を取得できるわけです。

コード例

<ul>
 <li><a href="https://www.google.com/?hl=ja">Google</a></li>
 <li><a href="https://www.youtube.com/">YouTube</a></li>
 <li><a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a></li>
 <li><a href="https://www.amazon.co.jp/">Amazon</a></li>
 <li><a href="http://twitter.com">Twitter</a></li>
</ul>

例えば、Yahoo! JAPAN(https://www.yahoo.co.jp/)を除外したその他のリンク要素を取得したい時には以下のようにできます。

//https://www.yahoo.co.jp/以外のノードを抽出
document.querySelectorAll("a[href]:not(a[href*='https://www.yahoo.co.jp/'])");

Chromeでテストしてみると...

querySelectorAll-正規表現-リンク(href)の取得方法_005

こんな感じになります。
今回は:not()内に、部分一致の「*=」を使っていますが、「=」にして完全に一致するURLを除外するという指定にしてもOKですね。

特定のリンク要素を除外したい時はa[href]:not(a[href*='URL'])とnotが使えます!

紹介したサンプルコードのまとめ

最後に当記事で紹介したコードをまとめておきます。

//【完全一致=】xxxに完全一致するhref属性を取得する
document.querySelectorAll("a[href='xxx']");

//【前方一致^=】前方にxxxがあるhref属性を取得する
document.querySelectorAll("a[href^='xxx']");

//【部分一致*=】URLの中にxxxを含むhref属性を取得する
document.querySelectorAll("a[href*='xxx']");

//【後方一致$=】URLの後方がxxxで終わるhref属性を取得する
document.querySelectorAll("a[href$='xxx']");

//【特定要素除外:not()】特定のxxx以外の全てのhref属性を取得する
document.querySelectorAll("a[href]:not(a[href*='xxx'])");

この他にもquerySelectorAll()に使用できる正規表現はありますが、リンク要素の取得という点では、以上の5点で大体意図した要素は抜けるかな?と思います。

特に:not()はハマるととても便利だったりしました~。

補足:「'」と「"」の使い方に気を付けよう

最後に以前気になったことで補足です。
querySelectorAll()は以下のように「"」でも「'」でも問題なく動きます。

document.querySelectorAll("~");
document.querySelectorAll('~');

これ、どちらを使用するかは好みらしいですが、間違えるとエラーが出ます。

querySelectorAll("")なら、中の属性値は''で囲む必要があります。(逆も然り)

querySelectorAll-not()-文法エラー_eyecatch
属性セレクタとnotを使ったら文法エラーが出て詰まった話。[querySelectorAll]

続きを見る

この内容について詳しくは過去記事(↑)に書いたので、何かエラーが出てしまった時にはこちらも参考になるかもしれません...。



まとめ

以上、JavaScriptのquerySelectorAll()で正規表現(属性セレクタ)を使って、任意のaタグのhref属性(リンク要素)を取得するためのサンプルコードのまとめでした。

リンク要素を取得するのにidやclassを振り分ける必要はないかも?
querySelectorAllでリンク要素をごにょごにょしたい時にご参考下さい!

う~ん記事を書いていて思ったのですが、日本語の違いが難しい!!
正規表現やら属性セレクタやらワイルドカード...
aタグ内のhref要素...正確にはリンク/URLではなくノード...
:not()は正確には「否定擬似クラス」という...などなど。類似語多すぎw

サンプルコードと使い方が伝われば幸いです。ではではこのへんで・w・

-サイト構築
-

site-logo
ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。
  • この記事を書いた人
ザキ

ザキ

X:@sologaku

プログラミングに興味があり情報系の大学を卒業。

新卒で社会人になるも数年で退職し今はフリーランスとして生きています。

少しでも誰かの役に立てれば...と思い、当サイトでIT関係のハウツーを発信しています。


ソロ学運営者:ザキの自己紹介

© 2020 sologaku