JavaScript matchで理解が5倍に！使い方10選

はじめに
●JavaScript match関数とは
- ○match関数の基本
●match関数の使い方
●match関数の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

JavaScriptの世界に潜り込んでみたものの、どうしても理解できない「match関数」がありますよね。

この記事を読めば、match関数の使い方が5倍理解できるようになります。

初心者向けに、match関数の基本から応用例、注意点、カスタマイズ方法まで徹底解説！

実践的な10個のサンプルコード付きで、今すぐ使える技術を身につけましょう！

●JavaScript match関数とは

match関数は、文字列から正規表現にマッチする部分を検索するために使用されるJavaScriptの組み込み関数です。

正規表現を使って、文字列内の特定のパターンを見つけたり、置換したりすることができます。

○match関数の基本

match関数の基本的な使い方は次のようになります。

let result = 文字列.match(正規表現);

このコードでは、文字列から正規表現にマッチする部分を検索し、その結果を変数「result」に格納しています。

●match関数の使い方

ここでは、match関数を使った4つの基本的な使い方と、それぞれのサンプルコードを紹介します。

○サンプルコード1：基本的なマッチング

このコードでは、文字列から数字を検索しています。

この例では、正規表現「/\d+/」を使って、連続する数字を検索しています。

let str = "住所は123-4567 東京都です";
let result = str.match(/\d+/);
console.log(result); // ["123"]

○サンプルコード2：グループ化してマッチング

このコードでは、文字列から郵便番号を検索しています。

この例では、正規表現「/(\d{3})-(\d{4})/」を使って、郵便番号の形式にマッチする部分を検索しています。

let str = "住所は123-4567 東京都です";
let result = str.match(/(\d{3})-(\d{4})/);
console.log(result); // ["123-4567", "123", "4567"]

○サンプルコード3：グローバルマッチ

このコードでは、文字列中のすべての数字を検索しています。

この例では、正規表現「/\d+/g」を使って、連続する数字を全て検索しています。

let str = "1番目は2, 3番目は4";
let result = str.match(/\d+/g);
console.log(result); // ["1", "2", "3", "4"]

○サンプルコード4：大文字・小文字を無視したマッチング

このコードでは、文字列中の特定の単語を大文字・小文字を無視して検索しています。

この例では、正規表現「/abc/i」を使って、大文字・小文字を無視した「abc」を検索しています。

let str = "AbCdef";
let result = str.match(/abc/i);
console.log(result); // ["AbC"]

●match関数の応用例

ここでは、match関数を用いた実践的な応用例を紹介します。

メールアドレスの検証、パスワードの強度チェック、電話番号の抽出、URLの抽出、特定の単語のハイライト、文章内のキーワード検索といった6つのサンプルコードを用意しました。

○サンプルコード5：メールアドレスの検証

このコードでは、文字列がメールアドレスの形式になっているかを検証しています。

この例では、正規表現「/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/」を使って、メールアドレスの形式にマッチするかどうかを確認しています。

function isValidEmail(email) {
  return email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
}

console.log(isValidEmail("example@example.com")); // ["example@example.com"]
console.log(isValidEmail("example@.com")); // null

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

このコードでは、パスワードが指定した条件を満たしているかをチェックしています。

この例では、正規表現を使って、8文字以上で、大文字・小文字・数字・特殊文字がそれぞれ1つ以上含まれていることを確認しています。

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

console.log(isValidPassword("P@ssw0rd")); // ["P@ssw0rd"]
console.log(isValidPassword("password")); // null

○サンプルコード7：電話番号の抽出

このコードでは、文字列から電話番号を抽出しています。

この例では、正規表現「/\d{2,4}-\d{2,4}-\d{4}/g」を使って、日本の電話番号の形式にマッチする部分を検索しています。

let str = "お問い合わせは03-1234-5678または090-1234-5678まで";
let result = str.match(/\d{2,4}-\d{2,4}-\d{4}/g);
console.log(result); // ["03-1234-5678", "090-1234-5678"]

○サンプルコード8：URLの抽出

このコードでは、文字列からURLを抽出しています。

この例では、正規表現「/https?://[^\s]+/g」を使って、URLにマッチする部分を検索しています。

let str = "詳細はこちら：https://example.com または http://example.jp";
let result = str.match(/https?:\/\/[^\s]+/g);
console.log(result); // ["https://example.com", "http://example.jp"]

○サンプルコード9：特定の単語のハイライト

このコードでは、文字列内の特定の単語をハイライトしています。

この例では、正規表現「/特定の単語/g」を使って、単語を検索し、その単語をタグで囲んでハイライトしています。

function highlightKeyword(text, keyword) {
  return text.replace(new RegExp(keyword, 'g'), `<mark>${keyword}</mark>`);
}

let str = "特定の単語をハイライトしたい。特定の単語だけを強調表示する。";
let result = highlightKeyword(str, "特定の単語");
console.log(result); // "特定の単語をハイライトしたい。<mark>特定の単語</mark>だけを強調表示する。"

○サンプルコード10：文章内のキーワード検索

このコードでは、文章内に指定したキーワードが存在するかどうかを検索しています。

この例では、正規表現を使って、キーワードの存在を確認しています。

function containsKeyword(text, keyword) {
  return text.match(new RegExp(keyword));
}

let str = "この文章の中にキーワードが含まれていますか？";
console.log(containsKeyword(str, "キーワード")); // ["キーワード"]