jQueryでaタグからパラメータを抜いたURLを取得する方法

2024年08月12日

この記事は約2分で読めます。

ブログ記事やWebサイトで、aタグにパラメータを仕込んでページ遷移させていることってありませんか？
jQueryを使えば、そのパラメータを簡単に排除したURLを取得することができるんです！
今回紹介するのは、たった数行のコードで実現できる超絶シンプルな方法。

jQuery

$('a').on('click', function(e){
  e.preventDefault(); // デフォルトのリンク動作を抑制

  var url = $(this).attr('href');
  var baseUrl = url.split('?')[0]; // パラメータ部分を除いたURLを取得

  alert('リンク先のURL「' + url + '」からパラメータを除いたURL: ' + baseUrl);
});

使い方

ではでは、実際にタグを置いて確認してみましょう。
下のボタンを押すと、パラメータを抜いたURLが表示されます。

長いパラメータが消えるボタン

aタグをクリックしたらじゃなく、ページが読み込まれたらに変えても取得できます。

ポイント

```
split('?')
```
で、URLをパラメータ部分とベースURL部分に分割します。
```
split('[0]')[0]
```
で、ベースURL部分の先頭要素のみを取得します。

これで、パラメータの有無に左右されず、思い通りの処理を実行することができます。