今すぐマスター！JavaScript Regexp入門10選

はじめに
●JavaScript Regexpとは
- ○正規表現の基本
●JavaScript Regexpの使い方
●JavaScript Regexpの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

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

日常的なWeb開発でよく遭遇する問題を解決するサンプルコードを提供します。

使い方や注意点、カスタマイズ方法についても詳しく解説していきますので、JavaScript Regexpを理解して効率的な開発ができるようになりましょう。

●JavaScript Regexpとは

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

特定のパターンに従った文字列を見つけたり、検証したりする際に役立ちます。

○正規表現の基本

正規表現は、検索や置換に使用するパターンを表現するための記述方法です。

一般的な正規表現の記述方法には、メタ文字と呼ばれる特殊な記号があります。

例えば、.（ドット）は任意の1文字を表し、*（アスタリスク）は直前の文字が0回以上繰り返すことを表します。

●JavaScript Regexpの使い方

ここでは、実際にJavaScript Regexpを使って、様々な問題を解決するためのサンプルコードを紹介します。

○サンプルコード1：電話番号のバリデーション

このコードでは、正規表現を使って電話番号のバリデーションを行う例を紹介しています。

この例では、日本の電話番号の形式をチェックしています。

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

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

○サンプルコード2：メールアドレスのバリデーション

このコードでは、正規表現を使ってメールアドレスのバリデーションを行う例を紹介しています。

この例では、一般的なメールアドレスの形式をチェックしています。

function isValidEmail(email) {
  const pattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
  return pattern.test(email);
}

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

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

このコードでは、正規表現を使ってパスワードの強度チェックを行う例を紹介しています。

この例では、英数字と特殊文字を組み合わせた強度の高いパスワードをチェックしています。

function isStrongPassword(password) {
  const lowerCase = /[a-z]/;
  const upperCase = /[A-Z]/;
  const number = /\d/;
  const specialChar = /[\!@#\$%\^&\*]/;

  return lowerCase.test(password) && upperCase.test(password) && number.test(password) && specialChar.test(password) && password.length >= 8;
}

console.log(isStrongPassword("Abc@1234")); // true
console.log(isStrongPassword("abc@1234")); // false

○サンプルコード4：URLからクエリパラメータを取得

このコードでは、正規表現を使ってURLからクエリパラメータを取得する例を紹介しています。

この例では、指定されたパラメータ名に対応する値を取得しています。

function getQueryParam(url, paramName) {
  const pattern = new RegExp(`[?&]${paramName}=([^&]+)`);
  const match = url.match(pattern);
  return match ? decodeURIComponent(match[1]) : null;
}

const url = "https://example.com?name=test&age=20";
console.log(getQueryParam(url, "name")); // "test"
console.log(getQueryParam(url, "age")); // "20"

●JavaScript Regexpの応用例

次に、JavaScript Regexpを応用した様々な処理について紹介します。

○サンプルコード5：文字列の置換

このコードでは、正規表現を使って文字列の置換を行う例を紹介しています。

この例では、指定されたキーワードを別の文字列に置き換えています。

function replaceText(text, search, replace) {
  const pattern = new RegExp(search, "g");
  return text.replace(pattern, replace);
}

console.log(replaceText("Hello, world!", "world", "Regexp")); // "Hello, Regexp!"

○サンプルコード6：マルチラインのテキスト処理

このコードでは、正規表現を使ってマルチラインのテキストを処理する例を紹介しています。

この例では、各行の先頭に番号を付けています。

function addLineNumbers(text) {
  return text.replace(/^/gm, (match, offset) => `${offset + 1}: `);
}

const multilineText = `Line1
Line2
Line3`;

console.log(addLineNumbers(multilineText));

○サンプルコード7：日付のフォーマット変更

このコードでは、正規表現を使って日付のフォーマットを変更する例を紹介しています。

この例では、YYYY/MM/DD形式の日付をYYYY年MM月DD日形式に変換しています。

function formatDate(dateString) {
  const pattern = /^(\d{4})\/(\d{2})\/(\d{2})$/;
  return dateString.replace(pattern, "$1年$2月$3日");
}

console.log(formatDate("2023/05/07")); // "2023年05月07日"

○サンプルコード8：テキスト内の特定の単語をハイライト

このコードでは、正規表現を使ってテキスト内の特定の単語をハイライトする例を紹介しています。

この例では、指定された単語を強調表示用のタグで囲んでいます。

function highlightWord(text, word) {
  const pattern = new RegExp(word, "gi");
  return text.replace(pattern, "<strong>$&</strong>");
}

console.log(highlightWord("JavaScript Regexp is great!", "regexp")); // "JavaScript <strong>Regexp</strong> is great!"

○サンプルコード9：カンマ区切りの数値に変換

このコードでは、正規表現を使ってカンマ区切りの数値に変換する例を紹介しています。

この例では、3桁ごとにカンマを挿入しています。

function numberWithCommas(number) {
  const pattern = /\B(?=(\d{3})+(?!\d))/g;
  return number.toString().replace(pattern, ",");
}

console.log(numberWithCommas(1234567)); // "1,234,567"

○サンプルコード10：HTMLタグの除去

このコードでは、正規表現を使ってHTMLタグを除去する例を紹介しています。

この例では、テキスト内のすべてのHTMLタグを削除しています。

function removeHtmlTags(html) {
  const pattern = /<\/?[^>]+(>|$)/g;
  return html.replace(pattern, "");
}

const html = "<p><strong>Hello</strong>, <em>world</em>!</p>";
console.log(removeHtmlTags(html)); // "Hello, world!"

●注意点と対処法

正規表現を使用する際には、いくつかの注意点があります。

正規表現のパターンが複雑になると、読みやすさが低下し、保守性が悪くなることがあります。
適切なコメントを付けて説明を加えることで、コードの理解を助けることができます。
正規表現はパフォーマンスに影響を与えることがあるため、適切な最適化とテストが必要です。
特に、大量のデータを処理する場合は、パフォーマンスへの影響を検証することが重要です。
正規表現は強力なツールですが、すべての問題に適しているわけではありません。
例えば、HTMLやXMLのパースには、専用のパーサーを使用する方が適切です。

対処法としては、次のような方法があります。