hrefに設定してあるurlにパラメータを追加する方法！Javascriptの勉強

例えばブログサイトなどでブログの記事内に共通パーツで設置しているリンクがあったときに、どのカテゴリの記事なのかや、いつ表示されたか時間を確認したいとなった場合、パラメータを仕込むのも1つの手ですよね。

ということでhrefに設定してあるurlにパラメータを追加する方法を調べてみました。

Contents

hrefに設定してあるurlにidで取得してパラメータを追加した結果
おまけすでにパラメータが設定されている場合
追記：全てのhrefの値にパラメータをつける方法
おわり
- 参考元

hrefに設定してあるurlにidで取得してパラメータを追加した結果

以下が完成したコードです。

See the Pen href add parameter by Nakamoto (@programmerlife) on CodePen.

調べるといろいろ書き方があるようですが、一番わかりやすいと思った方法でかいています。

詳しく書いていきます。

DOM操作でidからaタグを取得する

以下のコードでidがbtnのaタグを取得しています。

const btn = document.getElementById(‘btn’);

hrefがいるかで分岐

今回はhrefがあるかどうかで分岐していますが、例えばリンクに特定のパラメータがすでに追加されているかなど確認して条件分岐するのもいかもしれません。

if(btn.href) {
// コード
}

パラメータを追加する

画面上にある文字列をパラメータとして追加しています。

const cat = document.getElementById(‘cat’);
btn.href = btn.href + “?” + cat.innerHTML;

btn.href = btn.href + “?” + cat.innerHTML; でパラメータを追加しています。（パラメータは「?」で追加）
この後に画面にパラメータを戻す処理が必要だと思い込みかなりハマりましたが、リンクをホバーしてみるとブラウザ左下にパラメータ付きのリンクを確認することができすでに置き換わっていることに驚きました。

おまけすでにパラメータが設定されている場合

すでにパラメーターがある場合にパラメータを追加する時は「&」でパラメータを追加する必要があります。

See the Pen href add parameter(already set param) by Nakamoto (@programmerlife) on CodePen.

条件分岐で「?」が使われているかでパラメータの有無を調べています。特定のパラメータであればパラメータ名で分岐させた方が安全かもしれません。

if(btn.href.indexOf(“?”)==-1) {
// パラメーターがない場合「?」で追加
}else{
// パラメーターがある場合「&」で追加
}

btn.href.indexOf(“?”)はない場合「-1」が戻り値のため「btn.href.indexOf(“?”)==-1」という条件にしています。

追記：全てのhrefの値にパラメータをつける方法

上記ではidで取得したhrefに対してパラメータを付けていましたが、全てのhref要素にパラメータをつける方法です。

let allLink = document.querySelectorAll('a[href]'); // hrefのあるa要素を全て取得
    allLink.forEach((item) => {
        if (item.href.indexOf("?") == -1) { // ?が含まれていない
            item.href = item.href + "?id=1";
        } else { // ?が含まれている
            item.href = item.href + "&?id=1";
        }
    })

上記のコードで全てのhrefの値の末尾にURLパラメータをつけることができます。

また全てではなく指定したurlから始まるリンクのみなども可能です。

// ^= 前方一致 https://programmer-life.work/から始まるhrefのリンクのみ取得
document.querySelectorAll('a[href^="https://programmer-life.work/"]');

おわり

画面のカテゴリはパンくずリストなんかをイメージして書きました。日本語の場合はswitch文などで英字に置き換えて実施すればいいかなと思っています。
そうするとどのカテゴリの記事からのリンクかがわかってアナリティクスなどで調べやすくなるのではと思っています。

思っていた以上に簡単だったので、そんなわけはないと遠回りすることになり調べるのに時間がかかってしまいました。

参考元

Add parameters on href url with javascript and with specific conditions

hrefに設定してあるurlにパラメータを追加する方法！Javascriptの勉強