JSで多言語ページ（URL）の切り替えを行う方法

Question

多言語ページの切り替え方法について質問します。

現状とあるドメイン「hogehoge.com」で日本語のページがあるとします。
これに新たに英語版のページを作ることになり、
「hogehoge.com/en/~」というディレクトリのなかで日本語版と同じページ構成を作る際、
ヘッダーの言語切替aタグリンクボタン「JP/EN」で日本語⇔英語と切り替わるようにしたいです。

調べてみて一番参考になりそうなのが下記
https://www.webdesignleaves.com/wp/jquery/220/
だったのですが、

日本語ページは/jp/というディレクトリを切るのではなく直下で展開したいです。
英語になった場合のみ、/en/の中にリンクしたいのですが、
この場合JS（jQuery）でどう書けば正しく遷移できるでしょうか。

また、ただJP⇔ENで切り替えるのみでなく、英語版ページにいるときに、ヘッダーから別のコンテンツ（コンタクトフォームやプライバシーポリシーなどのページ）に遷移する際も、英語ページ→英語ページに遷移するようにしたいです。

当方HTMLとCSSしか分からずJSはコピペを多少いじって使える程度の理解度しか無く困っています。

理想の動きとしては、下記のようになります。

【ヘッダーの言語切り替えをクリックすると…】
１）トップページ（日本語）⇒トップページ（英語版）
２）下層コンテンツAページ（日本語：「hogehoge.com/コンテンツA」）⇒同一コンテンツAページの英語版（「hogehoge.com/en/コンテンツA」）
【ヘッダーから別ページに移動する際は言語はママ】
３）下層コンテンツAページ（英語版にいる）⇒ヘッダーの別のコンテンツBページをクリック⇒英語版のコンテンツBページが表示される

よろしくお願いします。

Comments

[miyabi_pudding]

JavaScript側（フロントエンド）だけで済む話ではないような・・・。
サーバーサイドは何か使っていないのでしょうか？

[sugi_sw]

ご回答ありがとうございます。
サーバーサイドでは何も使いません。

Answer 1

サーバ側じゃなくてJSで操作するということでしたら、以下のコードでリンク先のURLが取得できます。

let current_path = location.pathname,
	path_arr = current_path.split('/'),
	link_to;

if (path_arr[1] === "en") {
	path_arr.splice(1, 1);
} else {
	path_arr.splice(1, 0, 'en');
}

link_to = path_arr.join('/');

あとはこのlink_toの値を、ページ読み込み時に言語切り替えのボタンに割り当てるか、ボタンをクリックした際にこのURLに飛ばすかどちらかのスクリプトを書けば大丈夫です。

【追記】
「link_toの値をページ読み込み時に言語切り替えのボタンに割り当てる」というのは例えば以下のようなやり方です。
言語切り替えのリンクaのidを仮にlang-switchとします。

const linkBtn = document.getElementById('lang-switch');

document.addEventListener('DOMContentLoaded', function() {
	linkBtn.setAttribute('href', link_to);
});

「ボタンをクリックした際にこのURLに飛ばす」というのは以下のような方法です。

const linkBtn = document.getElementById('lang-switch');

linkBtn.addEventListener('click', function(e){
	e.preventDefault();
	location.href = link_to;
});

ちなみにjQueryを使用するならそれぞれ以下のようになります。

const linkBtn = $('#lang-switch');

$(function(){
	linkBtn.attr('href', link_to);
});

const linkBtn = $('#lang-switch');

linkBtn.on('click', function(e){
	e.preventDefault();
	location.href = link_to;
});

Comments

[sugi_sw]

ご回答ありがとうございます。

>あとはこのlink_toの値を、ページ読み込み時に言語切り替えのボタンに割り当てるか、ボタンをクリックした際にこのURLに飛ばすかどちらかのスクリプトを書けば大丈夫です。

知識がなさすぎて上の意味がまったく分かりませんでした。
すみません。

[sugi_sw]

詳しくご説明いただきありがとうございます。
こちらの記述を参考に無事うまくいきました。