JavaScriptで URL文字列や Imageファイルかどうかをチェックする正規表現バリデーションなどの実装方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで URL文字列や Imageファイルかどうかをチェックする正規表現のバリデーションなどを実装する方法について解説していきます。

1 URL文字列や Imageファイルかどうかをチェックする正規表現バリデーションなどの実装方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

URL文字列や Imageファイルかどうかをチェックする正規表現バリデーションなどの実装方法

文字列がURLであるかどうかの判定や、Imageファイルかどうかの判定などについて、それぞれ紹介していきます。

Imageファイルかどうかをチェックする正規表現バリデーション

Imageファイルかどうかをチェックする正規表現バリデーションは、次のような Imageファイルの拡張子を Checkする正規表現で対応できます。

/** ImageFile_Check_正規表現_パターン */
const imageRegex = /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i;

この Imageファイルかどうかをチェックする正規表現バリデーションで、関数を作成すると、次のような形になります。

const gmailAddress = "robotama@gmail.com";

const imagePath =
  "https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg";

/** Image_URL の拡張子で、ImageFileかどうかを判定する_Func */
function ImageFileChecker(imageFile) {
  /** ImageFile_Check_正規表現_パターン */
  const imageRegex = /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i;

  if (imageRegex.test(imageFile)) {
    console.log("正常系_URL");
    return true;
  } else {
    console.log("Error_URL");
    return false;
  }
}

ImageFileChecker(gmailAddress); // Error_URL
ImageFileChecker(imagePath); // 正常系_URL

URL() のコンストラクタを利用して、URLかどうかを判定する

文字列がURL文字列かどうかを判定する方法として確実なのは、URL()コンストラクタに文字列を渡してURLかどうかを調べる方法です。

URLオブジェクトが正しく生成されれば正しいと判断し、そうでない場合はエラーを返します。

MDNから引用すると次のとおり。

URL() コンストラクターは、パラメーターによって定義された URL を表す、

新しく生成された URL オブジェクトを返します。

与えられたベース URL または結果の URL が有効な URL でない場合、JavaScript の TypeError 例外がスローされます。
引用元： MDN-URL()

URL()コンストラクタでは、URLを渡さないと Errorをスローするので、try-catchを使用して、URLではない場合の判定と処理を記述します。

const blobURL =
  "blob:http://127.0.0.1:8000/e4cff7d4-3367-4579-9e9a-9a44877a122c";

const blogUrl = "https://masanyon.com/";

const jpUrl = "https://masanyon.com/ロボたま/purupuru";

const urlQueryParams =
  "https://masanyon.com/?robotama=purupuru&hakutou=mofumofu";

const gmailAddress = "robotama@gmail.com";

const robotama = "robotama";

/** URL_Instanseとして成立するかで、URL判定をする */
function UrlChecker(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}
console.log(UrlChecker(blobURL)); // true
console.log(UrlChecker(blogUrl)); // true
console.log(UrlChecker(jpUrl)); // true
console.log(UrlChecker(urlQueryParams)); // true
console.log(UrlChecker(gmailAddress)); // false
console.log(UrlChecker(robotama)); // false

正規表現を利用して、URLかどうかを判定する

次のような正規表現を搭載した関数で、URLかどうかを判定することもできます。

const blobURL =
  "blob:http://127.0.0.1:8000/e4cff7d4-3367-4579-9e9a-9a44877a122c";

const blogUrl = "https://masanyon.com/";

const jpUrl = "https://masanyon.com/ロボたま/purupuru";

const urlQueryParams =
  "https://masanyon.com/?robotama=purupuru&hakutou=mofumofu";

const gmailAddress = "robotama@gmail.com";

const robotama = "robotama";

/** 正規表現で、URLかどうかを Checkする Part2 */
function UrlChecker_2(str) {
  /** 英字のみのURL_正規表現_Pattern */
  const enUrlPattern = /https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+/g;

  /** 日本語を含む正規表現_Pattern */
  const jpUrlPattern =
    /https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+/g;

  return jpUrlPattern.test(str);
}

console.log(UrlChecker_2(blobURL)); // true
console.log(UrlChecker_2(blogUrl)); // true
console.log(UrlChecker_2(jpUrl)); // true
console.log(UrlChecker_2(urlQueryParams)); // true
console.log(UrlChecker_2(gmailAddress)); // false
console.log(UrlChecker_2(robotama)); // false