JavaScriptにおける正規表現チェックの強力な使い方10選！

はじめに
●JavaScriptの正規表現とは
- ○正規表現の基本
●正規表現チェックの使い方
●正規表現チェックの応用例
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptの正規表現チェックを使いこなすことができるようになります。

サンプルコードや注意点、カスタマイズ方法も網羅しているので、初心者でも安心して読み進めることができます。

●JavaScriptの正規表現とは

正規表現（RegExp）は、文字列のパターンマッチングや検索、置換を行うための強力なツールです。

JavaScriptで正規表現を使うことで、テキスト処理を効率的かつ柔軟に行うことができます。

○正規表現の基本

正規表現は、特殊文字と通常の文字で構成されます。

特殊文字は、特定のルールに従ってマッチするパターンを表現し、通常の文字はそのままの文字を表現します。

例えば、正規表現「\d{3}-\d{4}」は、郵便番号のような「123-4567」という形式の文字列にマッチします。

●正規表現チェックの使い方

正規表現チェックは、主に次のような場面で使用されます。

メールアドレスのチェック
電話番号のチェック
パスワードのチェック
URLのチェック

それぞれのサンプルコードを見ていきましょう。

○サンプルコード1：メールアドレスのチェック

メールアドレスの形式をチェックする正規表現は、下記のようになります。

function isValidEmail(email) {
  const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
  return regex.test(email);
}

console.log(isValidEmail("test@example.com")); // true
console.log(isValidEmail("test@example")); // false

○サンプルコード2：電話番号のチェック

電話番号の形式をチェックする正規表現は、下記のようになります。

function isValidPhoneNumber(phoneNumber) {
  const regex = /^\d{2,4}-\d{2,4}-\d{4}$/;
  return regex.test(phoneNumber);
}

console.log(isValidPhoneNumber("03-1234-5678")); // true
console.log(isValidPhoneNumber("0312345678")); // false

○サンプルコード3：パスワードのチェック

パスワードの形式をチェックする正規表現は、下記のようになります。

function isValidPassword(password) {
  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
  return regex.test(password);
}

console.log(isValidPassword("Password123")); // true
console.log(isValidPassword("password123")); // false

○サンプルコード4：URLのチェック

URLの形式をチェックする正規表現は、下記のようになります。

function isValidUrl(url) {
  const regex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
  return regex.test(url);
}

console.log(isValidUrl("https://www.example.com")); // true
console.log(isValidUrl("www.example.com")); // false

●正規表現チェックの応用例

正規表現チェックは、さまざまなシーンで応用できます。

下記にいくつかの応用例を示します。

日付のチェック
カスタムパターンのチェック
テキスト内の特定の単語を置換
フォームのバリデーション
検索機能の実装
リアルタイム入力チェック

それぞれのサンプルコードを見ていきましょう。

○サンプルコード5：日付のチェック

日付の形式をチェックする正規表現は、下記のようになります。

function isValidDate(date) {
  const regex = /^(19|20)\d{2}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/;
  return regex.test(date);
}

console.log(isValidDate("2023/04/11")); // true
console.log(isValidDate("2023-04-11")); // false

○サンプルコード6：カスタムパターンのチェック

特定のカスタムパターンをチェックする正規表現は、下記のようになります。

function isValidCustomPattern(text, pattern) {
  const regex = new RegExp(pattern);
  return regex.test(text);
}

console.log(isValidCustomPattern("abc123", "^[a-z]{3}\\d{3}$")); // true
console.log(isValidCustomPattern("ABC123", "^[a-z]{3}\\d{3}$")); // false

○サンプルコード7：テキスト内の特定の単語を置換

テキスト内の特定の単語を置換する正規表現は、下記のようになります。

function replaceText(text, searchWord, replaceWord) {
  const regex = new RegExp(searchWord, "gi");
  return text.replace(regex, replaceWord);
}

console.log(replaceText("Hello World", "World", "JavaScript")); // "Hello JavaScript"

○サンプルコード8：フォームのバリデーション

フォームのバリデーションを行う正規表現は、下記のようになります。

function validateForm() {
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  if (!isValidEmail(email) || !isValidPassword(password)) {
    alert("Invalid input");
    return false;
  }

  return true;
}

○サンプルコード9：検索機能の実装

検索機能を実装する正規表現は、下記のようになります。

function searchWords(text, keyword) {
  const regex = new RegExp(keyword, "gi");
  return text.match(regex);
}

const text = "JavaScript is a powerful programming language. Many developers love JavaScript.";
const keyword = "JavaScript";
console.log(searchWords(text, keyword)); // ["JavaScript", "JavaScript"]

○サンプルコード10：リアルタイム入力チェック

リアルタイムで入力内容をチェックする正規表現は、下記のようになります。

document.getElementById("input").addEventListener("input", function (event) {
  const inputText = event.target.value;
  const regex = /^[a-z]*$/i;

  if (!regex.test(inputText)) {
    alert("Invalid input");
  }
});

このコードは、HTMLファイルの<input id="input">要素に対してリアルタイムで入力内容をチェックし、アルファベット以外の文字が入力された場合に警告を表示します。