【初心者向け】JavaScriptの正規表現の基本・使い方をわかりやすく解説！

2024-04-29

当サイトでは一部リンクに広告が含まれています

JavaScriptの正規表現とは

JavaScriptにおける正規表現（Regular Expression）は、文字列の中から特定のパターンにマッチする部分を検索したり置換したりするための強力な機能です。

正規表現を使うと、例えば以下のようなことが簡単に実現できます。

フォーム入力値が正しい形式（メールアドレス、郵便番号など）かチェックする
電話番号や個人情報など特定の文字列を「*」に置換してマスクする
HTMLタグや空白を削除して文字列をクリーニングする

このように、正規表現を使いこなすと文字列処理の生産性が飛躍的に向上します。

しかし、正規表現は一見すると/\s\d+/gのような意味不明な文字列の羅列に見えるので、初心者には難しく感じられがちです。

そこで本記事では、JavaScriptの正規表現について以下の内容を初心者にもわかりやすく解説していきます。

正規表現の基本的な仕組み
よく使う特殊文字の意味
正規表現を使ったメソッド
実務でよく使う正規表現の活用事例

この記事を読み終えれば、JavaScriptの正規表現をマスターし、文字列処理のスキルを大きく向上させることができるでしょう。

これまで正規表現に挫折した方でも大丈夫なぐらい、丁寧に解説しますのでご安心ください！

正規表現の基本的な使い方

まずは正規表現の基本的な使い方について見ていきましょう。

JavaScriptで正規表現を使うには、正規表現リテラルとRegExpオブジェクトの2種類の方法があります。

正規表現リテラル

正規表現リテラルは、/（スラッシュ）で正規表現パターンを囲む方法です。

const regex = /パターン/フラグ;

フラグは、マッチングの挙動を制御するオプションで、以下のものがあります。

フラグ	意味
`g`	マッチしたすべての部分文字列を検索（グローバルサーチ）指定しない場合は最初にマッチした部分文字列のみ
`i`	大文字小文字を区別しない
`m`	複数行検索 `^`と`$` が各行の先頭・末尾にマッチ

例えば、3桁の数字にマッチする正規表現は以下のように書けます。

const regex = /\d{3}/g;

RegExpオブジェクト

RegExpオブジェクトのコンストラクタに正規表現のパターンを文字列で渡す方法です。

const regex = new RegExp('パターン', 'フラグ');

使い分け

正規表現リテラルとRegExpオブジェクトの使い分けは以下の通りです。

正規表現のパターンが固定なら、パフォーマンスが良い正規表現リテラル推奨
パターンを変数で組み立てる場合やユーザー入力から動的に生成する場合はRegExpオブジェクトを使う

基本は正規表現リテラルを使い、動的なパターン生成が必要な場合にRegExpオブジェクトを使うとよいでしょう。

正規表現の主なパターン

次に、正規表現でよく使われるパターンを見ていきましょう。

`.`	任意の1文字	`.`は改行`\n`以外の任意の1文字
`\w`	英数字とアンダースコア	`[a-zA-z0-9_]`と同等
`\d`	数字	`[0-9]`と同等
`\s`	空白文字	半角スペース、タブ、改行など
`\S`	空白文字以外	`[^\s]`と同等
`^`	行頭	文字列または行の先頭
`$`	行末	文字列または行の末尾
`\b`	単語境界	単語の先頭または末尾
`*`	0回以上の繰り返し	`{0,}`と同等
`+`	1回以上の繰り返し	`{1,}`と同等
`?`	0回か1回	`{0,1}`と同等
`{n}`	n回の繰り返し	`a{3}`なら`aaa`にマッチ
`{n,}`	n回以上の繰り返し	`\d{3,}`なら3桁以上の数字
`{n,m}`	n回以上m回以下の繰り返し	`\d{3,5}`なら3桁以上5桁以下の数字
`\|`	OR	`a\|b`なら`a`または`b`
`[...]`	文字クラス	`[0-9A-Z]`なら0から9までの数字、AからZまでの大文字アルファベット
`[^...]`	否定文字クラス	`[^a-z]`なら小文字アルファベット以外

ここでは一般的によく使われる特殊文字を紹介しましたが、他にもたくさんの特殊文字があります。
今は全部覚えようとせず、使う頻度が高いものから少しずつ習得していけばOKです。

正規表現でよく使うメソッド

正規表現を使ってできることは、文字列からパターンにマッチする部分を「検索」「置換」「分割」することです。

ここでは、それぞれを実現するメソッドを見ていきましょう。

マッチした文字列を検索する（matchメソッド）

match()メソッドは、正規表現にマッチした部分文字列を配列で返します。

const str = 'JavaScript is fun. It is worth learning.';
console.log(str.match(/is/g)); //=> ["is", "is"]

gフラグを指定すると、マッチしたすべての部分文字列を配列で返します。
フラグを指定しないと最初にマッチした文字列のみ返します。

マッチした文字列を置換する（replaceメソッド）

replace()メソッドは、マッチした部分文字列を指定した文字列で置換します。

const str = 'JavaScript is fun. It is worth learning.';
console.log(str.replace(/is/g, 'IS')); //=> "JavaScript IS fun. It IS worth learning."

gフラグを指定するとマッチしたすべての部分文字列が置換されます。
フラグを指定しないと最初にマッチした文字列のみ置換されます。

マッチした位置を検索する（searchメソッド）

search()メソッドは、マッチした部分文字列の開始位置を返します。

const str = 'JavaScript is fun. It is worth learning.';
console.log(str.search(/is/)); //=> 11

マッチしない場合は-1を返します。search()メソッドは常に最初にマッチした位置のみ返します。

文字列を分割する（splitメソッド）

split()メソッドは、マッチした部分で文字列を分割し、その結果を配列で返します。

const str = 'JavaScript:is:fun. It:is:worth:learning.';
console.log(str.split(/:/)); //=> ["JavaScript", "is", "fun. It", "is", "worth", "learning."]

split()メソッドの引数に正規表現を渡すと、マッチした部分がすべて分割されます。

マッチするかどうかをテストする（testメソッド）

test()メソッドは、文字列が正規表現にマッチするかどうかをtrueまたはfalseで返します。

const regex = /is/;
console.log(regex.test('JavaScript is fun.')); //=> true
console.log(regex.test('JavaScript')); //=> false

test()は正規表現オブジェクトのメソッドなので、正規表現リテラルではなくRegExpオブジェクトに対して使う点に注意しましょう。

正規表現の実践的な使い方

ここからは、実務でよく使う正規表現の活用事例をいくつか紹介します。

メールアドレスの形式をチェックする

ユーザー登録フォームなどで入力されたメールアドレスが正しい形式かどうかをチェックしたい場合は以下の正規表現が使えます。

const regex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
console.log(regex.test('test@example.com')); //=> true
console.log(regex.test('test@example.c')); //=> false

この正規表現は、「ローカルパート@ドメイン」の形式で、ローカルパートには英数字と一部の記号を許容し、ドメインには英数字とハイフン、ドットを許容するというルールを表現しています。

電話番号を●で置換する

個人情報保護のため、電話番号の一部を伏せ字にしたい場合は以下の正規表現が使えます。

const str = '電話番号は090-1234-5678です。';
console.log(str.replace(/\d{2,4}/g, (match) => {
  return '●'.repeat(match.length);
})); //=> "電話番号は090-●●●●-●●●●です。"

これは、2桁以上4桁以下の数字にマッチし、replace()メソッドの第2引数で渡したコールバック関数の中でマッチした数字と同じ長さだけ●に置換しています。

URLからドメイン名を抽出する

URLの文字列からドメイン名だけを取り出したい場合は、以下の正規表現が使えます。

const url = 'https://www.example.com/path/to/page.html';
const domain = url.match(/^https?:\/\/([^\/]+)/i)[1];
console.log(domain); //=> "www.example.com"

この正規表現は、http://またはhttps://で始まり、その後ろのスラッシュ/までの文字列を抽出しています。

match()メソッドの結果の[1]がキャプチャグループでマッチした文字列です。

HTMLタグを取り除く

文字列からHTMLタグを削除してプレーンテキストだけを抽出したい場合は、以下の正規表現が使えます。

const html = 'Hello World!';
const text = html.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
console.log(text); //=> "Hello World!"

この正規表現は、<と>で囲まれたHTMLタグにマッチし、replace()メソッドで空文字列に置換することでHTMLタグを取り除いています。

まとめ

本記事では、JavaScriptの正規表現について初心者向けに詳しく解説しました。

正規表現の基本的な使い方や主要なパターン、メソッドの種類と使い分けを理解し、実際の活用事例も学んだことで、正規表現を使った柔軟な文字列処理ができるようになったのではないでしょうか。

正規表現は非常に奥が深いので、一度に全てを理解しようとせず、今回学んだ基本的な知識をベースに実際のコーディングの中で少しずつ使っていくことが大切です。

練習を重ねるうちに、ますます高度な文字列処理がスムーズにできるようになるでしょう。ぜひ正規表現を使いこなして、JavaScriptの実装スキルを高めていってください！