ブログ

jQueryでURLパラメータごとのページ書き換え方法|JavaScript

こんな方におすすめ

  • URLパラメータを使ってページ内のリンクを動的に変更したい方
  • jQueryの具体的な使い方を知りたい方

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パラメータによってリンクや文字列を変更する方法」を解説しました。

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

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

あわせて読みたい


jQueryの最新バージョンを読み込むhtmlタグ|バージョン一覧有り、そのままコピペOK

こんな方におすすめ jQueryの最新バージョンを読み込む方法を知りたい方 jQueryのバージョン一覧を見たい方 Webサイトを作る方にとってjQueryは必須ライブラリです。 jQueryの最新バ ...

続きを見る

created by Rinker
¥1,419 (2024/03/29 06:08:18時点 Amazon調べ-詳細)

---- 当サイトのPRをさせてください ----

当サイトは「社会人に役立つ仕事術、生活術、スキルアップ術」を発信しております。また来ていただけたらたいへん嬉しいです。

ぜひブックマークをお願いします。

iPhoneの方:
ブラウザ下部の[↑]ボタン > [ホーム画面に追加]もしくは[ブックマーク追加]

Androidの方:
ブラウザ右上の [︙]ボタン > [ホーム画面に追加(アプリをインストール)] もしくは[☆タップ]

PCの方:
ブラウザ 右上の[☆]ボタン、もしくはキーボード[Ctrl]+[D]

またのお越しをお待ちしております。

\面白かったらシェアお願いします/

-ブログ
-, ,