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

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

JavaScript正規表現のサンプルコードJS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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

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

●JavaScriptの正規表現とは

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

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

○正規表現の基本

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

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

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

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

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

  1. メールアドレスのチェック
  2. 電話番号のチェック
  3. パスワードのチェック
  4. URLのチェック

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

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

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

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

console.log(isValidEmail("[email protected]")); // 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

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

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

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

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

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

○サンプルコード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">要素に対してリアルタイムで入力内容をチェックし、アルファベット以外の文字が入力された場合に警告を表示します。

●注意点と対処法

正規表現は非常に便利ですが、いくつかの注意点があります。

  1. 複雑な正規表現は読みにくく、保守が難しくなります。コメントで説明を加えるか、正規表現を分割してシンプルにすることが推奨されます。
  2. 正規表現が長くなると、実行速度が遅くなることがあります。特にリアルタイム入力チェックなどでは、パフォーマンスに注意してください。

まとめ

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

基本的な使い方や注意点、応用例を理解し、状況に応じてカスタマイズして活用しましょう。