【jQuery】aタグのリンク先の一部を書き換える方法

今回はボタンに設定されているリンク先を変更する方法を紹介していきたいと思います。

タグのリンク先の一部を書き換える方法

html

<a href="https://7-create.com/category/item/" class="btn">ボタン</a>

上記aタグに設定されているリンク先の中で「category」を「all」に変更する方法です。

js

jQuery(function () {   
        let pathUrl = jQuery('.btn').attr('href');
        let targetPath = '/category';

        if(pathUrl.match(targetPath)){		
		let changeUrl = pathUrl.replace(targetPath, '/all');
		jQuery('.btn').attr('href', changeUrl);
	}
});    

解説

let pathUrl = jQuery('.btn').attr('href');

ボタンのaタグに設定されているhref属性の値を取得する方法です。

let targetPath = '/category';

今回変更するディレクトリを変数に入れておきます。

if(pathUrl.match(targetPath)){		
	let changeUrl = pathUrl.replace(targetPath, '/all');
	jQuery('.btn').attr('href', changeUrl);
}

さきほど取得したhrefのなかに「/category」が含まれていたら先に進みます。

replaceを使ってさきほどの「/category」を「/all」に書き換えます。

そして書き換えたパスをボタンのhrefに入れます。