[JavaScript] 文字列がパスではなくURLかどうか判定する方法

背景

JavaScriptで文字列をURLか判定する方法がいくつかあるが、どれが一番適しているのかを考えてみる過程で書いてみた。

正規表現を利用する

特定のブラウザに依存しない方法として、正規表現がよく利用される。

const URL_REGEX = /^(https?:\/\/)?([\w.-]+)\.([a-zA-Z]{2,})(\/[\w.-]*)*\/?$/;
const isURL = (str) => URL_REGEX.test(str);

URL.canParse(str)を利用する

サポートブラウザを考えなければ、URL.canParse(str)を利用するのが一番簡単（URL: canParse() 静的メソッド）。

const isURL = (str) => URL.canParse(str);

isURL('https://example.com'); // true
isURL('hoge'); // false

サポートブラウザは以下の通り。

URL()コンストラクタを利用する

const isURL = (str) => {
  try {
    // 文字列をURLとして解析を試みる
    new URL(str);
    return true;
  } catch (e) {
    try {
      // プロトコルを追加してURLの解析を再試行
      // `example.com`のような文字列もURLとして認識される
      new URL(`http://${str}`);
      return true;
    } catch (e) {
      return false;
    }
  }
};

isURL('https://example.com'); // true
isURL('hoge'); // false

サポートブラウザは以下の通り。

パフォーマンス

パフォーマンスを比較すると以下の順番になった。

1. 正規表現: 100%
2. URL.canParse(): 17%
3. URL()コンストラクタ: 3%

ベンチマークの結果 | Perflink

単純なURLの検証であれば正規表現が最適。ただ、対象の文字列（URL）解析、操作が必要になってくうる場合はURLコンストラクタを利用せざるを得ないが、モダンブラウザ対象であればURL.canParse()を利用するといった選択になっていきそう。