JavaScriptで文字列を処理する際、正規表現(RegExp)は非常に強力なツールとなります。
正規表現を使いこなせば、特定のパターンにマッチする文字列の検索や置換、抽出などを柔軟に行うことができます。
しかし、正規表現特有の記号や特殊文字が多数出てくるため、初心者にとっては少し難しく感じられるかもしれません。
この記事では、JavaScriptでの正規表現の基本的な使い方から、特殊文字の意味、実践的なサンプルコードまで詳しく解説していきます。
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
- プログラミングスクールのカリキュラム執筆経験あり
正規表現(RegExp)の基本
正規表現オブジェクトの生成
JavaScriptで正規表現を使うには、まず正規表現オブジェクト(RegExpオブジェクト)を生成する必要があります。生成には2つの方法があります。
- 正規表現リテラル
/パターン/フラグ - RegExpコンストラクタ
new RegExp('パターン', 'フラグ')
// 正規表現リテラル
const re1 = /[0-9]/g;
// RegExpコンストラクタ
const re2 = new RegExp('[0-9]', 'g');上記の例では、0〜9の数字にマッチする正規表現を生成しています。gはグローバルサーチのフラグで、文字列全体からマッチする部分を探します。
正規表現メソッド
正規表現オブジェクトには便利なメソッドが用意されており、それらを使って文字列の検索や置換などを行います。
| メソッド | 説明 |
|---|---|
test() | パターンにマッチするかを判定。マッチすればtrue、しなければfalseを返す。 |
exec() | パターンにマッチする文字列を抽出。結果を配列で返す。 |
match() | exec()とほぼ同じだが、こちらは文字列に対して使う。 |
replace() | マッチした部分を指定した文字列で置換。 |
const str = 'JavaScript123';
const re = /[0-9]+/;
console.log(re.test(str)); //true
console.log(re.exec(str)); //["123"]
console.log(str.match(re)); //["123"]
console.log(str.replace(re, ''));//JavaScript上記の例では、strから数字部分(123)を正規表現reで抽出・除去しています。[0-9]は0〜9の数字を表し、+は直前の表現の1回以上の繰り返しを意味します。
正規表現の特殊文字
正規表現パターンでは、.や*のような特殊な意味を持つ文字(メタ文字)を使って柔軟なマッチングを行います。
よく使う特殊文字
| 文字 | 意味 |
|---|---|
. | 任意の1文字 |
* | 直前の文字の0回以上の繰り返し |
+ | 直前の文字の1回以上の繰り返し |
? | 直前の文字の0回または1回の出現 |
^ | 行頭 |
$ | 行末 |
\d | 数字 |
\w | 単語を構成する文字(アルファベット、数字、アンダースコア) |
\s | 空白文字 |
文字クラス
[]で文字の集合(文字クラス)を表すことができます。
const str = 'abcABC123';
console.log(str.match(/[a-z]/g)); //["a", "b", "c"]（小文字にマッチ）
console.log(str.match(/[A-Z]/g)); //["A", "B", "C"]（大文字にマッチ）
console.log(str.match(/[0-9]/g)); //["1", "2", "3"]（数字にマッチ）
console.log(str.match(/[^0-9]/g));//["a", "b", "c", "A", "B", "C"]（数字以外にマッチ）-でまとめて範囲指定ができ、^を使うと否定の意味になります。
グループ化と参照
()を使うとパターンをグループ化でき、\数字で後方参照できます。
const str = 'abc123def123ghi123';
console.log(str.match(/(123)/g)); //["123", "123", "123"]（グループ化）
console.log(str.match(/(123)(\w+)\1/g)); //["123def123", "123ghi123"]（後方参照）\1は1番目の()にマッチした文字列を再利用する意味です。
特殊文字のエスケープ
特殊文字そのものにマッチさせたい場合は、\(バックスラッシュ)でエスケープします。
const str1 = 'abc.efg';
console.log(str1.match(/\./)); //["."]（ドットそのもの）
const str2 = 'abc*efg';
console.log(str2.match(/\*/)); //["*"]（アスタリスクそのもの）RegExpコンストラクタを使う場合は\\のように\を重ねる必要があります。
特殊文字は他にもたくさんありますが、基本的な使い方は以上のようになります。
正規表現の構文に慣れることが大切ですね。
正規表現サンプル
文字列の検索
文字列の中から特定の単語を検索してみましょう。
const str = 'JavaScript is fun. Learning JavaScript is worth.';
const re = /JavaScript/g;
while ((match = re.exec(str)) !== null) {
console.log(`Found ${match[0]}. Next starts at ${re.lastIndex}.`);
}Found JavaScript. Next starts at 10.
Found JavaScript. Next starts at 38.exec()はgフラグがある場合、続きから検索していきます。lastIndexプロパティで次の検索開始位置がわかります。
文字列の置換
電話番号を***-****-****の形式に置換する例です。
const str = '私の電話番号は090-1234-5678です。';
const re = /\d+/g;
console.log(str.replace(re, (match) => '*'.repeat(match.length)));
//私の電話番号は***-****-****です。replace()の第2引数に関数を指定すると、マッチした部分文字列を加工できます。
メールアドレスの検証
入力されたメールアドレスが正しい形式かどうかを検証してみましょう。
const emailPattern = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
function validateEmail(email) {
return emailPattern.test(email);
}
console.log(validateEmail('test@example.com')); //true
console.log(validateEmail('test@example')); //false
console.log(validateEmail('test.example.com')); //falseこの正規表現は、メールアドレスの形式をかなり網羅的にチェックしています。test()メソッドで一致するかを判定しているだけなので、コードはシンプルですね。
HTMLタグの除去
文字列からHTMLタグを取り除いてプレーンテキストにする例です。
const str = 'This is a link.';
const re = /<(".*?"|'.*?'|[^'"])*?>/g;
console.log(str.replace(re,'')); //This is a link.この例の正規表現は、<と>に囲まれた部分にマッチします。
属性値の引用符"'の扱いが少し複雑ですが、これで多くの場合は対応できるでしょう。
まとめ
いかがでしたか？正規表現を使いこなせば、JavaScriptでの文字列処理の幅がぐっと広がります。特殊文字の意味を理解し、パターンの書き方に慣れることが大切ですね。
この記事で紹介した内容を参考に、ぜひ様々なケースで正規表現を活用してみてください。初めは複雑に感じるかもしれませんが、使っているうちに徐々に身についていくはずです。
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
