【js】URLで条件分岐(取得とif文の組み方)

2019-03-28 14:23

ディレクトリやクエリ、パラメーターやアンカーなど、URLにはたくさんの情報が詰まっています。

そこで今回はURLを取得し、その条件に応じてifで条件分岐をするJSの書き方をご紹介します。

URLの取得
条件分岐

URLの取得

URLの何を取得したいかでjsの書き方が異なりますので、まずはそこから紹介します。

// url
var url = location.href ;

// host
var host = location.hostname ;

// path
var path = location.pathname ;

// query
var query = location.search ;

// protocol
var protocol = location.protocol ;

//アンカー
var hash = location.hash;

//参照元
var refferrer = document.referrer;

//確認はconsoleで
console.log(url);

必要があればURLを”/”で切り分けます。その時は”split”を使いましょう。この時格納された値は配列扱いとなります。

var directory = url.split("/");

条件分岐

URLを取得できたら、条件分岐のif文を組んでいきましょう。最初に紹介するのはURL取得も1文で済ませる条件式です。

//URL取得を含むif文 現在のURLにhogeが含まれていたら実行
if(document.URL.match("/hoge/")) {
$('body').addClass('hoge');
}

しかし「refferrer」などはこれが使えませんので、下記などが有効です。
(例)https://hoge.com/campaign/price/からの流入ならアラートをだす。

//参照元取得
var refferrer = document.referrer;

//refferrerを”/”で分割
var directory01 = refferrer.split("/");

//配列の後ろから2つを格納
var directory02 = directory01.slice(-2);

//配列を”/”で結合 /campaign/price/の文字列作成
var directory03 = "/" + directory02.join('/') + "/";

//directory03が「/campaign/price/」なら実行
if(directory03 == "/campaign/price/"){
window.alert("キャンペーン実施中!今がお得!");
} else {}

わざわざこんな事しなくても別の処理は可能かと思いますが、今回は初心者にも理解しやすい手順を紹介しました。