ブログ

【コピペOK】URLパラメータによって「リンク先や文字列」を変更する方法(JavaScript利用)

2020年3月11日

Webサイトを運営している方でページを次のように動作させたいと思ったことはありませんか?

URLパラメータを使って
・ページ内のリンク動的に変更したい
・ページ内の文字列動的に変更したい。

今回「URLパラメータによってリンクや文字列を変更する方法」を解説したいと思います。

URLパラメータによってリンクや文字列を変更する方法

先にURLパラメータについて簡単に説明しておきます。

URLパラメータとは

URLパラメータとはサイトのURLの末尾に付ける文字列のことを言います。

下記の例でいうと「?」後ろの部分です。

「?」の後ろの形式は「パラメータ=値」で記載し、複数ある場合は「&」で連結します。

【コピペOK】URLパラメータによってリンクや文字列を変更するプログラム

URLパラメータによってリンクや文字列を変更するプログラムjQuery(JavaScript)を利用して書きました。

プログラム上にコメントで解説しています。ぜひ参考にしてみてください。

挙動を確認しながらプログラムを見ると分かりやすいのでぜひデモページもご覧になってください

デモページ

<!DOCTYPE html>
<html>
	<head>
		<title>パラメータによってリンク先変更</title>
		<style>
			.square {
			  margin: 10px;
			  padding: 50px;
			  border: 3px dotted red;
			}
		</style>
	</head>
	<body>
		<h1>パラメータによってリンク先変更<h1>

		URLパラメータの「old」の値で遷移先を振り分けします。<br>

		<br>

		・<a href="parameter_demo.html?old=25">old=25</a><br>
		・<a href="parameter_demo.html?old=15">old=15</a><br>

		<br>

		<div class="square">

			<!--ここにメッセージ表示-->
		    <div class="message"></div>

			<!--ここにリンク表示-->
			<a href="#" id="goURL" target= _blank >Go!</a>

		</div>

		<!--jQuery読み込み-->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<script>
			$(function(){

				//URL全体を「?」で分割してparamsに格納
				params = location.href.split("?");

				//URLパラメータが有れば処理
				if(params.length>1){

					//URLパラメータ部分を「&」で分割してparamに格納
					param = params[1].split("&");

					//連想配列paramArrayを定義、初期化
					var paramArray = [];

					//パラメータの件数だけループさせる
					for ( i = 0; i < param.length; i++ ) {

						//各パラメータを「=」で分割してparamKeyValueに格納
						paramKeyValue = param[i].split("=");

						//上記で分割した「=」の左辺、右辺を連想配列paramArrayに格納
						paramArray[paramKeyValue[0]] = paramKeyValue[1];
					}

					//oldパラメータの値が18以上の場合
					if(paramArray["old"] >= "18") {

						//class「message」のタグ内に文言を追加表示
						$('.message').append('「18才以上」はGoogleへ');

						//id「goURL」のタグ内のhrepの値を以下に置き換え
						$("#goURL").attr("href", "https://www.google.co.jp/");


					//oldパラメータの値が18未満の場合
					}else{

						//class「message」のタグ内に文言を追加表示
						$('.message').append('「18才未満」はYahooへ');
						//id「goURL」のタグ内のhrepの値を以下に置き換え
						$("#goURL").attr("href", "https://www.yahoo.co.jp/");
					}

				//URLパラメータが無ければ処理
				}else{

					//class「message」のタグ内に文言を追加表示
					$('.message').append('パラメータ無し(ワーカホリックダイアリーへどうぞ)');

					//id「goURL」のタグ内のhrepの値を以下に置き換え
					$("#goURL").attr("href", "https://workaholicdiary.com/");
				}
			});
		</script>
	</body>
</html>

さいごに

今回「URLパラメータによってリンクや文字列を変更する方法」を解説しました。

誰かのお役に立てたら幸いです。

以上、ワーカホリックダイアリーでした。

あわせて読みたい


【コピペOK】jQueryの最新バージョンを高速に読み込むためのhtmlタグ。バージョン一覧も有り。

Webサイトを作る方にとってjQueryは必須ライブラリです。 jQueryの最新バージョンをダウンロードして自らのサーバーに配置するのは、面倒臭いし、読み込みも遅くて困ります。 その困り事を解決する ...

続きを見る

\記事リクエスト募集中/


【お願い】
ワーカホリックダイアリーでは「社会人に役立つ仕事術、ライフハック情報」を毎日23時50分に発信しております。

社会人の方はぜひブックマークしていただき明日もお越しいただけたら嬉しいです。

[ブックマーク手順]
iPhone Safariの方:
 下部の[↑](共有ボタン) > [ホーム画面に追加]もしくは[ブックマーク追加]

Android Chromeの方:
 右上の [︙](縦3点リーダー) > [ホーム画面に追加] もしくは[☆タップ]

パソコンの方:
 キーボードの[Ctrl]+[D] もしくは 右上の[☆クリック]

\面白かったらシェアお願いします!/
記事タイトルとURLをコピー

-ブログ
-, ,

Copyright© ワーカホリックダイアリー , 2020 All Rights Reserved.