JavaScriptの正規表現(RegExp)の使い方を徹底解説! 特殊文字の意味とサンプルコード付き

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

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は学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか?

目次