【JavaScript】aタグのhref属性を書き換える【全体／一部】

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでaタグのhref属性の全体または一部を書き換える方法をご紹介しています。

上記の疑問にお答えしています。

では、解説していきます。

aタグのhref属性を書き換える（全体）

JavaScriptで属性の値の設定には、setAttributeを使用します。setAttributeは属性の追加や値を変更することができるelementのメソッドです。

詳細に下記の記事をご参照ください。

実際にsetAttributeでhref属性の値を書き換えてみます。

HTML

href属性を書き換える対象を用意します。要素が取得しやすいようにid属性を指定しています。

<a id="link" href="#" target="_blank">Click Me!</a>

JS

JavaScriptで要素を取得し、setAttributeでhref属性の値を書き換えます。書き換える値は変数のurlに持たせています。

let link = document.getElementById('link');

let url = 'https://into-the-program.com';

//href属性の値を書き換える

link.setAttribute('href', url);

実行結果

下記は実行結果です。href属性の値がurlに指定した値に書き換えられているかと思います。

See the Pen
6108-1 by ryohei (@intotheprogram)
on CodePen.

上記ではページ読み込み時にhref属性の書き換えを実行していますが、ボタンクリックやマウスオーバーといったイベント発生時に処理するなど応用できます。実装環境に合わせてお使いいただければと思います。

aタグのhref属性を書き換える（一部）

前項ではhref属性全体の値を書き換えましたが、ここでは値の一部だけを書き換える方法をご紹介したいと思います。

処理の流れは下記のようになります。

• a要素を取得する
• 取得したa要素からhref属性の値を取得する
• replaceでhref属性の値の一部を置き換える
• 置き換えた値をhref属性に設定する

では実際に処理を作成していきます。href属性には予めURLを設定して起き、それの一部を置き換えて再度設定してみます。

HTML

HTMLを用意します。URLの中にあるjqueryの部分を置き換えていきます。

<a id="link" href="https://into-the-program.com/category/jquery/" target="_blank">Click Me!</a>

JS

続いてスクリプトを作成します。各行の処理内容はコメントをご参照ください！

//a要素を取得する

let link = document.getElementById('link');

//a要素のhref属性の値を取得する

let oldHref = link.getAttribute('href');

//replaceでhref属性の一部（jquery）を新しい値（javascript）に置き換える

let newHref = oldHref.replace('jquery', 'javascript');

//置き換えた値をa要素のhref属性に設定する

link.setAttribute('href', newHref);

実行結果

下記は実行結果です。無事hrefの値の一部が書き換わっているかと思います。

See the Pen
6108-2 by ryohei (@intotheprogram)
on CodePen.

以上の方法でhref属性の値の一部を書き換えることができます。

最後に

JavaScriptで属性を操作する処理はたくさん書くことになりますので、getAttributeとsetAttributeの存在は知っておくと良いかもしれません！本記事でhref属性の値の一部置き換えに使用したreplaceは正規表現などで詳細に条件を設定することができるので、詳しく知りたい方は下記のドキュメントを参考にしていただければと思います！

以上、JavaScriptでaタグのhref属性の全体または一部を書き換える方法のご紹介でした！