[javascript入門] URL文字列かどうかをチェックする方法まとめ

今回は、URL文字列かどうかをチェックする方法の紹介です。今回紹介する方法は3つとなります。

URL()を利用したチェック方法

URL()コンストラクタに文字列を渡してURLかどうかを調べる方法です。URLオブジェクトが正しく生成されれば正しいと判断し、そうでない場合はエラーを返します。
この関数を利用する場合はtry-catchを使用します。

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

console.log(isValidUrl('https://feeld-uni.com')); 
// true
console.log(isValidUrl('app://feeld-uni.com')); 
// true
console.log(isValidUrl('Feeld Blog')); 
// false

正規表現を利用したチェック方法

正規表現RegExp関数を利用して文字列がURLであるかどうかをチェックします。有効なURLかどうかのパターンを作成し、文字列比較を行います。

function isValidUrl(str) {
  const pattern = new RegExp(
    '^([a-zA-Z]+:\\/\\/)?' + //プロトコルパターン
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + //ドメインパターン
    '((\\d{1,3}\\.){3}\\d{1,3}))' + //IPアドレスパターン
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // ポート番号またはパス
    '(\\?[;&a-z\\d%_.~+=-]*)?' + //クエリストリング
    '(\\#[-a-z\\d_]*)?$', //フラグ情報
    'i'
  );
  return pattern.test(str);
}

console.log(isValidUrl('https://feeld-uni.com')); 
// true
console.log(isValidUrl('app://feeld-uni.com')); 
// true
console.log(isValidUrl('Feeld Blog')); 
// false

npmパッケージの「is-url」を利用したチェック方法

NPMパッケージに含まれるis-urlをインストールして利用することも可能です。

import isUrl from 'is-url';

console.log(isUrl('https://feeld-uni.com')); 
// true
console.log(isUrl('app://feeld-uni.com')); 
// true
console.log(isUrl('Feeld Blog')); 
// false

最後に

URLをチェックする処理は結構頻繁に行う可能性が高い処理なので、覚えておくと良いかと思います。