JavaScript location.hrefのリンクについて、もっと綺麗な記述方法があれば教えてください。

Question

現在絶対パスを取得してリンクをするために以下の記述をしています。

//https://HostName/DirectoryName/Index?year=2020&month=10 を起点にして
//https://HostName/DirectoryName/Create?year=2020&month=10&id=nに遷移する
var pathnames = location.pathname.split('/');
var pathname = "";
for (var j = 0; j < pathnameList.length; j++) {
    if (pathnames[j].indexOf("Index") === -1) {
        pathname += pathnames[j] + "/";
    }
}
var url = location.origin + pathname + "/Create" + location.search + "&id=" + id;
location.href = url;

現在リンクのために8行も使っているのですが、もっと短く記述できる方法があれば知りたいです。

Answer 1

単純に/Index→/Createに置換して&id=nをつければ良いかと思いますが、ホスト名やディレクトリ名が仮のものなので提示のものが汎用性も高いのでは。短く書けばいいってものでもないです。
パターンケースによって要件を満たせるかどうかを主眼としてください。

Answer 2

現在リンクのために8行も使っているのですが

pathname が絡むと、ある程度行数は必要です（それをユーザ関数にして使えば、各所で１行になります）。

requirejs というAMDに分類される「モジュール化ライブラリ」でも、pathname 処理用のユーティリティ関数trimDots() が実装されていますが、17行です（うまく使えば NodeJS の url.resolve() などをブラウザ側で実装できそうな強力なpathname処理を行います）。

モダンブラウザでのURLの処理は、次のネイティブ実装も参考にして良いと思います。

• URL()
• URLSearchParams()

Answer 3

どこまで汎用性を求めているかによりますが

var orgurl="https://HostName/DirectoryName/Index?year=2020&month=10";
var newurl=orgurl.match(/.+//)[0]+"Create"+orgurl.match(/?.+/)[0]+"&id=n";
console.log(newurl);