定義と使い方
文字列において match() 関数は、正規表現を使用して指定された文字列と一致する部分を検索し、その結果を返します。
特徴
- この関数は、大文字と小文字を区別します。
- 一致する部分が見つかった場合、その部分を含む配列を返します。
- 一致する部分がない場合は
nullを返します。 - メールアドレス、URL、HTMLタグのような特定のパターンの文字列を検査する際に役立ちます。
基本例
const str = "apple orange banana apple";
/* 文字列から
最初に一致するパターンのみを検索し、配列として返します。
(出力される配列の最初の要素は一致したパターンの文字列であり、
その次の要素には index、input、groups プロパティが含まれます。) */
const pattern = /apple/;
const result = str.match(pattern);
console.log(result); // 出力: ["apple", index: 0, input: "apple orange banana apple", groups: undefined]
console.log(result.length); // 出力: 1
console.log(result[0]); // 出力: "apple"
/* もし、テキスト全体からすべての一致するパターンの文字列を検索したい場合は、
正規表現に g(グローバル検索)フラグを追加します。
g フラグがない時に配列の要素として出力されていた index、input、groups プロパティは含まれず、
すべての一致するパターンの文字列がそれぞれ配列の要素として返されます。 */
const globalPattern = /apple/g;
const globalResult = str.match(globalPattern);
console.log(globalResult); // 出力: ["apple", "apple"]
console.log(globalResult.length); // 出力: 2
console.log(globalResult[0]); // 出力: "apple"
console.log(globalResult[1]); // 出力: "apple"
/* 特定のパターンの文字列を検査する
メールアドレスのパターンを検索 */
const userInfo = "私のメールアドレスは user@example.com です。";
const searchEmailPattern = /\w+@\w+\.\w+/g;
const searchEmailResult = userInfo.match(searchEmailPattern);
console.log(searchEmailResult); // 出力: ["user@example.com"]
console.log(searchEmailResult.length); // 出力: 1
console.log(searchEmailResult[0]); // 出力: "user@example.com"
構文
str.match(regexp);
strは検索対象となる文字列です。
引数
regexp |
|
|---|
戻り値
- 一致する部分が見つかった場合、その部分を含む配列を返します。この際、正規表現の
g(グローバル)フラグの使用有無によって、返される配列要素の構成が異なります。-
gフラグなし:配列の最初の要素は一致したパターンの文字列であり、その次に詳細情報(index、input、groupsプロパティ)要素が含まれた配列を返します。 -
gフラグあり:一致するパターンの文字列がすべてそれぞれの要素として構成された配列を返します。詳細情報要素は含まれません。
-
- 一致する部分がない場合は
nullを返します。
g フラグ」という用語についての簡単な補足説明です。gフラグ- 正規表現(Regular Expression)においてグローバル検索(global search)を意味するために使用されます。
JavaScriptにおいて正規表現はスラッシュ(/)でパターンを囲んで記述しますが、囲んだスラッシュにgを付けた形です。ここでgは正規表現においてグローバル検索(global search)を示すものであることから、「gフラグ」(flag、旗)と呼ばれます。match()関数にgフラグを使用すると、一致したすべての部分文字列がそれぞれ配列の要素として返されます。
g フラグと戻り値の例
引数として使用される正規表現の g(グローバル)フラグの使用有無によって、返される配列要素の構成がどのように変わるかを確認します。
g フラグなし
g フラグがない場合、最初の要素は一致したパターンの文字列であり、その次に詳細情報(index、input、groups プロパティ)がそれぞれの要素として構成された配列が返されます。一致する部分がない場合は null を返します。
このように返される配列の要素が複数出力されますが、実際のこの配列の長さ(配列の length)は 1 であることに留意する必要があります。
const str = "apple orange banana apple";
const pattern = /apple/; // g フラグなし
const result = str.match(pattern);
console.log(result);
// 出力: ["apple", index: 0, input: "apple orange banana apple", groups: undefined]
console.log(result.length); // 出力: 1
g フラグあり
g フラグがある場合、一致するパターンの文字列がすべてそれぞれの要素として構成された配列を返します。この際、詳細情報(index、input、groups プロパティ)は配列の要素に含まれません。一致する部分がない場合は null を返します。
このように返される配列の長さは、実際の配列の要素数です。
const str = "apple orange banana apple";
const globalPattern = /apple/g; // g フラグあり
const globalResult = str.match(globalPattern);
console.log(globalResult); // 出力: ["apple", "apple"]
console.log(globalResult.length); // 出力: 2
引数がない場合
match() 関数の引数がない場合、言い換えれば何の引数も渡さない場合、配列に空の文字列("")を返します。
const str = "Hello, World!";
const result = str.match();
console.log(result); // 出力: ["", index: 0, input: 'Hello, World!', groups: undefined]
console.log(result.length); // 出力: 1
コードの補足説明
配列において length プロパティは、配列に含まれる要素の数を数値で返します。
引数が空の文字列("")である場合
引数が空の文字列("")である場合、配列に空の文字列("")を返します。
const str = "Hello, World!";
const result = str.match("");
console.log(result); // 出力: ["", index: 0, input: 'Hello, World!', groups: undefined]
console.log(result.length); // 出力: 1
引数が空白文字列(" ")である場合
引数が空白文字列(" ")である場合、その文字列をパターンとして認識し、文字列内でその空白文字列と一致する部分を探します。戻り値は、一致した空白文字列を含む配列になります。
const str = "Hello, World!";
const result = str.match(" ");
console.log(result); // 出力: [" ", index: 6, input: 'Hello, World!', groups: undefined]
console.log(result.length); // 出力: 1
引数と一致するパターンの文字列が複数ある場合
引数と一致するパターンの文字列が複数ある場合、文字列内で最初に一致するパターンのみを探して配列で返します。
const str = "apple orange banana apple";
const pattern = /apple/;
const result = str.match(pattern);
console.log(result); // 出力: ["apple", index: 0, input: 'apple orange banana apple', groups: undefined]
console.log(result.length); // 出力: 1
一致するパターンの文字列が複数ある時に、すべてを返したい場合
もしテキスト全体から一致するすべてのパターンの文字列を探したい場合は、正規表現に g(グローバル検索)フラグを追加します。
const str = "apple orange banana apple";
const pattern = /apple/g; // <= g (グローバル検索) フラグを追加
const result = str.match(pattern);
console.log(result); // 出力: ["apple", "apple"]
console.log(result[0]);
console.log(result[1]);
console.log(result.length); // 出力: 2
正規表現のフラグは /regex/flags のように記述します。regex の部分に正規表現パターンが入り、flags にフラグが入ります。上記のコード例では /apple/g と記述しており、正規表現 /apple/ に g(グローバル検索)フラグを追加したものです。
大文字と小文字を区別せずに文字列を探す
正規表現はデフォルトで大文字と小文字を区別します。しかし、i(case-insensitive search)フラグを使用すれば、大文字と小文字を区別せずに目的のパターンの文字列を探すことができます。
const str = "Apple orange banana Apple";
// g フラグなし / i フラグあり
const pattern1 = /apple/i;
const result1 = str.match(pattern1);
console.log(result1); // 出力: ["Apple", index: 0, input: 'Apple orange banana Apple', groups: undefined]
// g フラグあり / i フラグあり
const pattern2 = /apple/gi; // /apple/ig と正確に同一(フラグの順序は自由)
const result2 = str.match(pattern2);
console.log(result2); // 出力: ["Apple", "Apple"]
引数と一致する部分がない場合
一致するパターンがない場合は null が返されます。
const str = "Hi, World!";
const pattern = /Hello/;
const result = str.match(pattern);
console.log(result); // 出力: null
活用例
match() 関数は、メールアドレス、URL、HTMLタグなどの特定のパターンの文字列を検証する際に有用です。また、さまざまな状況で効果的に活用できます。ここでは、いくつかの例を扱います。
メールアドレスの検証
const text = "お問い合わせは help@example.com または support@example.org までご連絡ください。";
const emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
const emailMatches = text.match(emailPattern);
console.log(emailMatches);
// 出力: ["help@example.com", "support@example.org"]
URL検証
const text = "詳細は https://www.example.com でご確認ください。";
const urlPattern = /\b(?:https?:\/\/)?(?:www\.)?[a-zA-Z0-9-]+(?:\.[a-z]{2,})+(?:\/[^\s]*)?\b/g;
const urlMatches = text.match(urlPattern);
console.log(urlMatches);
// 出力: ["https://www.example.com"]
HTMLからタグを抽出
const html = '<div class="container"><p>Hello, <b>world!</b></p></div>';
const tagPattern = /<[^>]+>/g;
const tags = html.match(tagPattern);
console.log(tags);
// 出力: ["<div class="container">", "<p>", "<b>", "</b>", "</p>", "</div>"]
CSSクラスセレクターの抽出
const css = '.header { color: #333; } .main-content { font-size: 16px; }';
const classPattern = /\.([a-zA-Z-_\d]+)/g;
const classes = css.match(classPattern);
console.log(classes);
// 出力: [".header", ".main-content"]
互換性
| メソッド |
デスクトップ Chrome
|
デスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
Node.js
|
|---|---|---|---|---|---|
match()
|
1 | 12 | 1 | 1 | 0.10 |
仕様書
| 仕様書 | |
|---|---|
match()
|
ECMAScript® 2026 Language Specification #sec-string.prototype.match |