指定した文字列を含むかどうか判定するJavaScriptで取得したURLをデモと本番で変更する

こんにちは、あじさいけーすけです。
普段のホームページ制作では、デモ環境と本番環境で作業がわかれていますよね。

デモと本番ではドメインが違う環境で作業しているので、JavaScriptコードで指定するドメインの文字列も変える必要があります。

今回はドメインを取得して、指定した文字列を含むかどうか判定し、デモと本番のURLを書き分けるコードを紹介します。

match関数とreplace関数を使おう

JavaScriptでは、match関数を使って文字列が含まれているかどうかを判定できます。
使い方はこんな感じ。

const hoge = '指定文字列';
const piyo = 'あいうえお';
const target = hoge.match(piyo);

// 返り値
console.log(target);
// piyoの文字列がhogeに含まれていたらArray、なければnull

さらにreplaceを使って、match関数を使って指定文字列が含まれているか判定した後、指定した文字列を任意の文字列に置換します。

const currentDomain = document.domain;
const demoDomain = 'ajsaidev.jp'; // 仮にajsaidev.jpがデモとすると
const dynamicDomain = 'ajsai.jp'; // 本番ドメインをajsai.jpとする
const currentUrl = location.href;
if( currentDomain.match(/demoDomain/) ){
  if( currentUrl.match(/dynamicDomain/) ){
    currentUrl = currentUrl.replace(/dynamicDomain/,'demoDomain' ); // 文字列置換はreplaceを使う
  }
}

今回のサンプルでは、ドメインを取得してデモ環境だったら….現在のページのURLの中に含まれている本番環境ドメインの文字列をデモ環境ドメインの文字列に置換します。

状況によって書き換える必要がありますがこんな感じでしょうか。

文字列の指定と置換ができれば何かと便利

広告コードやデモと本番でコード出力をわけることがある場合に便利です。
match関数やreplace関数で文字列を指定する際は、正規表現を使うので少し大変な時もありますが、どうしてもドメインを直で出力する必要が出てくるので、たまに使っています。

そういえば、PHPでも同じようなことをして、デモと本番のフォームの送信先を自動で分けるようにしたりもしていました。

参考記事