JavaScriptで特定のhref属性から指定文字列を抽出

Question

前提・実現したいこと

JavaScriptにてhtmlの中に存在するhref属性の文字列の中から指定文字列を抽出したいと考えております。
なお、すべてのhrefを対象にするのではなく特定の文字列が含まれるhrefを対象に文字列抽出をおこなたいです。

（例）
htmlの中に下記URLのリンクが存在する場合にaaa.comとccc.comの末尾の数値部分だけを抜き出したい

①aaa.com/1234/
②bbb.co.jp/5678/
③ccc.com/9012/

→ 1234,9012

試したこと

下記のページを参考にページ内のリンク一覧を取得するところまではできたのですが、
一覧から①と③に絞り込み、さらに末尾の数値部分だけを抽出するJavaScriptが実現できずに困っております。

https://www.nishishi.com/javascript-tips/linknuminpage.html

どなたかご回答いただけますと幸いです。

＜補足＞
対象とするhrefを含むaタグに対してclassを付与することは可能です。

①<a href="aaa.com/1234/" class="target">aaa.comへ</a>
②<a href="bbb.co.jp/5678/">bbb.co.jpへ</a>
③<a href="ccc.com/9012/" class="target">ccc.comへ</a>

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
  var datas=[...document.querySelectorAll('a')].map(x=>{
    return (x.href.match(/(?:aaa.com|ccc.com)/(.+)//)||{})[1];
  }).filter(x=>x);
  console.log(datas);
});

Comments

[work.]

さっそくのご回答ありがとうございます！
ブラウザのConsoleにて実行してみたのですが、undefinedが返ってきてしまうようです。。

上記でご回答いただいたもののうち、私の環境に合わせて書き換えが必要なのは「aaa.com|ccc.com」の部分かと思ったのですが、認識あっていますでしょうか？

ご回答いただけますと幸いです。

[yambejp]

codepenにサンプルあげときました

https://codepen.io/yambejp/pen/RwPZpxP

[work.]

codepenのほうもありがとうございました。Consoleでは問題なく動作することを確認いたしました。
ただ最終的な動作としてはこちらのJavaScriptをGoogleタグマネージャーのカスタムjsにて設定をおこない、末尾のパス部分を変数として利用したいと考えております。

記述いただきましたJavaScriptですとGoogleタグマネージャーでサポートされていない旨のメッセージがでてしまうのですが、別の回避方法をご存知でないでしょうか？

おそらく、「...document.querySelectorAl」の部分がサポートされていないようです。
質問投稿時に書いておけばよかったのですが後から申し訳ありません。

[yambejp]

> 「...document.querySelectorAl」の部分がサポートされていない

これだとどうでしょう？
window.addEventListener('DOMContentLoaded',function(){
var datas=[].map.call(document.getElementsByTagName('a'),function(x){
return (x.href.match(/(?:aaa.com|ccc.com)/(.+)//)||{})[1];
}).filter(function(x){
return x;
});
console.log(datas);
});

[work.]

できました！！！！
迅速にご回答いただきありがとうございました。
またなにかアドバイスいただけますと幸いです

Answer 2

こんにちは

ご質問に

対象とするhrefを含むaタグに対してclassを付与することは可能です。

①<a href="aaa.com/1234/" class="target">aaa.comへ</a>

②<a href="bbb.co.jp/5678/">bbb.co.jpへ</a>
③<a href="ccc.com/9012/" class="target">ccc.comへ</a>

とあったので、上記のとおり、class が "target" の a を対象にするコードを挙げます。（したがって、 aaa.com などのドメイン部分は使用しないコードになっています）

const targetLinks = [...document.querySelectorAll('a.target')];
const targetValues = targetLinks.map(a => a.href.replace(/^.+/([^/]+)/?$/, (...m) => m[1]));

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/abOyJgg?editors=1012

上記で、a.href.replace(/^.+/([^/]+)/?$/, (...m) => m[1]) によって、各URLを構成するパスの最後の部分を取り出します。

Comments

[work.]

ご回答ありがとうございました。Consoleでは問題なく動作することを確認いたしました！
ただ最終的な動作としてはこちらのJavaScriptをGoogleタグマネージャーのカスタムjsにて設定をおこない、末尾のパス部分を変数として利用したいと考えております。

記述いただきましたJavaScriptですとGoogleタグマネージャーでサポートされていない旨のメッセージがでてしまうのですが、別の回避方法をご存知でないでしょうか？

おそらく、「...document.querySelectorAl」の部分がサポートされていないようです。
質問投稿時に書いておけばよかったのですが後から申し訳ありません。

[jun68ykt]

どういたしまして。
他の回答者様の回答によって、問題が解決したようでよかったです????

[work.]

コメントありがとうございました。
また何かありましたらご相談させていただけますと幸いです。
今後ともよろよろしくお願いします