フォームに入力された値をJavaScriptのURLコンストラクタ(パーサー)でURL形式かチェックする方法

フォームのテキストボックスに入力された値がURL形式になっているかチェックしたかった。実際に存在するURLかどうかのチェックは不要。それ用の正規表現サンプル的なものを調べようとしたところ、JavaScriptのURLコンストラクタ(パーサー)を用いればもっとシンプルに実装できるみたい。以下に対応方法をメモ。

対応方法

ソースコード

console.log(validateUrl(`https://www.google.com`)); //true
console.log(validateUrl(`https://www.google`)); //true
console.log(validateUrl(`google`)); //false

function validateUrl( url ){
    try{
        new URL(url);
        return true;
    }catch(e){
        return false;
    }
}

注意点

ソースコードのコメントの通り「https://www.google」でもtrueが返る。あくまでも指定の値がURLとして構文的にパースできるかどうかをチェックしているため「http(s)://xxxx.xxxx」形式だとtrueが返る点に注意。

リファレンス

URL: URL() コンストラクター

https://developer.mozilla.org/ja/docs/Web/API/URL/URL