JavaScriptで、URLのPath文字列にクエリパラメーター(?)があるかどうかの判定や作成する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで、URLのPath文字列にクエリパラメーター(?)があるかどうかの判定や作成する方法について解説していきます。

1 URLのPath文字列にクエリパラメーター(?)があるかどうかの判定や作成する方法
2 Twitterやってます！Follow Me！
3 参考・引用
4 最近の投稿

URLのPath文字列にクエリパラメーター(?)があるかどうかの判定や作成する方法

以前に『【JavaScript】URLのクエリパラメーターの作り方と取得や削除する方法』という記事を書いていますが、今回の内容は、また別の内容になります。

この後の説明を Checkした上で、要件にあった記事を読んでてみてください。

【JavaScript】URLのクエリパラメーターの作り方と取得や削除する方法

上記の記事で、説明した JavaScriptでクエリパラメーターを作成する方法を要約すると次のとおりです。

URLSearchParams() を使って、JavaScript のObjectからクエリパラメーターを作る方法
URLインスタンスを作成してから、searchParamsプロパティ(URLSearchParamsと同じ機能)を使って、URL に対してクエリパラメーターの作成・取得・削除(Set・Get・Delete)などをする方法

そして、今回、説明する内容は、URLインスタンスなどは使用せず、URLのPath文字列に対して、

クエリパラメーター(?)があるかどうかの判定や、作成する方法について説明していきます。

今回の記事で、説明する内容をまとめると次のとおりです。

正規表現で、クエリパラメーター(?)があるかどうかの判定をする方法。
クエリパラメーター(?)の部分や、その前のURL部分を取得する方法。
Path文字列の末尾にCacheBuster (キャッシュ無効化)のタイムスタンプを追加する方法。
クエリパラメーター文字列を JavaScript Object に変換する方法。
JavaScript Object をクエリパラメーター文字列に変換する方法。

上記の内容の入れずれかを確認したい場合は、この記事が適しています。

クエリパラメーター(?)があるかどうかの判定をする方法

次のような url.match(/\?(.*)/) の正規表現で、クエリパラメーター(?)があるかどうかの判定をすることができます。

const url = "https://masanyon.com/path?param1=value1¶m2=value2";

if (url.match(/\?(.*)/)) {
  console.log("?あり");
} else {
  console.log("?なし");
}

クエリパラメーター(?)の部分や、その前のURL部分を取得する方法

次のようにすることで、URL文字列の中からクエリパラメーターの部分だけを取得したり、その前のURL部分だけを取得したりすることができます。

/** 1. 完全なURL文字列パターン */
const url = "https://masanyon.com/path?param1=value1¶m2=value2";

/** 1-1. クエリパラメーターより前の URL部分だけを取得する */
const path = url.substring(0, url.indexOf("?"));
console.log("path", path);
// path https://masanyon.com/path

/** 1-2. クエリパラメーターの部分だけを取得する */
const queryParameters = url.match(/\?(.*)/)[1];
console.log("queryParameters", queryParameters);
// queryParameters param1=value1¶m2=value2

// 1-3. ちなみに、url.match(/\?(.*)/) の実行結果は、次のとおり ?付きも取得することができる
console.log("url.match(/?(.*)/)", url.match(/\?(.*)/));
// [ "?param1=value1¶m2=value2", "param1=value1¶m2=value2" ]

/** 2. 部分的なURL文字列パターン */
const url2 = "/path?param1=value1¶m2=value2";

/** 2-1. クエリパラメーターより前の URL部分だけを取得する */
const path2 = url2.substring(0, url2.indexOf("?"));
console.log("path2", path2);
// path2 /path

/** 2-2. クエリパラメーターの部分だけを取得する */
const queryParameters2 = url2.match(/\?(.*)/)[1];
console.log("queryParameters2", queryParameters2);
// queryParameters2 param1=value1¶m2=value2

部分的なPath文字列でも、解析可能なのはURLインスタンスなどを使用する方法ではなく、正規表現 or indexOfなどを使用したパターンになります。

indexOfでもクエリパラメーター(?)の部分を取得することができます。

const url = "robotama/path?key1=value1&key2=value2";

/** Path から、QueryParameterの部分だけを取得する */
const queryString = url.slice(url.indexOf("?") + 1);
console.log("queryString", queryString);
// queryString key1=value1&key2=value2

Path文字列の末尾にCacheBuster (キャッシュ無効化)のタイムスタンプを追加する方法

ここまでの内容の総まとめで、URLのPath文字列の末尾にタイムスタンプのクエリパラメーターを追加する関数を作成しました。

つまり、CacheBuster (キャッシュ無効化)のためのURLを作成する関数です。

/** 既存のクエリパラメーターありパターン */
const url = "/robotama/?key1=value1&key2=value2";

/** 既存のクエリパラメーターなしパターン */
const url2 = "/maritama";

/** CacheBusterをするための URLを作成する Fucntion */
function createNoCacheUrl(url) {
  // ?ありの場合 => 既存の QueryParameter が存在する場合
  if (url.match(/\?(.*)/)) {
    /** ?より前の Path部分 */
    const path = url.substring(0, url.indexOf("?"));
    /** QueryParameter部分 */
    const queryParameter = url.match(/\?(.*)/)[1];
    /** 既存の QueryParameterたちに、TimeStamp を追加する */
    const newUrl = `${path}?${queryParameter}&time=${Date.now()}`;
    return newUrl;
  } else {
    return `${url}?time=${Date.now()}`;
  }
}

/** キャッシュを無効化する キャッシュバスターURL */
const cacheBusterUrl = createNoCacheUrl(url);
console.log("cacheBusterUrl", cacheBusterUrl);
// cacheBusterUrl /robotama/?key1=value1&key2=value2&time=1689493443712

/** キャッシュを無効化する キャッシュバスターURL */
const cacheBusterUrl2 = createNoCacheUrl(url2);
console.log("cacheBusterUrl2", cacheBusterUrl2);
// cacheBusterUrl2 /maritama?time=1689493443712

クエリパラメーター文字列を JavaScript Object に変換する方法

クエリパラメーター文字列をJavaScript Objectに変換する方法は、次のとおりです。

/** クエリパラメーター文字列 */
const queryString = "?key1=value1&key2=value2";

/** クエリパラメーター文字列を JS_Objectに変換する */
const paramObj = [...new URLSearchParams(queryString).entries()].reduce(
  (obj, e) => ({ ...obj, [e[0]]: e[1] }),
  {}
);
console.log("paramObj", paramObj);
// paramObj {key1: 'value1', key2: 'value2'}

JavaScript Object をクエリパラメーター文字列に変換する方法

先ほどの逆で、JavaScript Object をクエリパラメーター文字列に変換する方法は次のとおりです。

/** クエリパラメーター文字列 */
const queryString = "?key1=value1&key2=value2";

/** クエリパラメーター文字列を JS_Objectに変換する */
const paramObj = [...new URLSearchParams(queryString).entries()].reduce(
  (obj, e) => ({ ...obj, [e[0]]: e[1] }),
  {}
);
console.log("paramObj", paramObj);
// paramObj {key1: 'value1', key2: 'value2'}

// タイムスタンプを JS_Objectに追加する
paramObj.time = Date.now();

/** JS_Objectを QueryParameterに戻す */
const urlSearchParam = new URLSearchParams(paramObj).toString();
console.log("urlSearchParam", urlSearchParam);
// urlSearchParam key1=value1&key2=value2&time=1689494222825