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

今回は、URL文字列かどうかをチェックする方法の紹介です。今回紹介する方法は3つとなります。 ヘルパー関数を作成するメリット

• URL()を利用したチェック方法
• 正規表現を利用したチェック方法
• npmパッケージの「is-url」を利用したチェック方法

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