開発ブログ
Git、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。。

Javascript での正規表現の記述方法

最終更新:2018-04-06 by Joe

Javascript での正規表現の記述方法についてまとめました。

 Javascript での正規表現の記述方法

Javascriptでは正規表現はオブジェクトの型の一つとして定義されています。これは、コンストラクタ関数「RegExp」で定義されています。

正規表現 Regxp オブジェクトの生成

Javascriptで正規表現オブジェクトの生成方法は2種類あります。もっとも典型的な方法は、コンストラクタ関数 RegExp()を用いたオブジェクトの生成です。もしくは、Javascript においては、「/(スラッシュ)」を使って正規表現を囲む「リテラル表現」を用いると、よりシンプルに正規表現オブジェクトを生成できます。

// その1)コンストラクタ関数を利用
var re = new RegExp('https?://example\.com');


// その2)リテラル表現を利用
var re = /https?:\/\/example\.com/;

なお、リテラル表現では、スラッシュ以外はデリミタとして認められませんので注意して下さい。また、デリミタとしてのスラッシュとの混同を避けるため、パターン内では、上記のようにスラッシュをエスケープする必要が生じます。

Javascript における正規表現マッチング

正規表現を使ったマッチングを行うには、RegExpオブジェクトで利用可能な正規表現関連のメソッドを利用するか、もしくは、Stringオブジェクトも正規表現マッチングを実行するための関数が実装されています。

マッチした文字列を取得する

マッチングを成否を確認するには、RegExpオブジェクトの.exec()メソッドか、Stringオブジェクトの.match()を使います。

RegExp.exec()

まず、.exec() は幾分詳しい情報を配列で返します。また、オブジェクトの状態を更新します。

var pattern = /(ja)va/;

// 結果情報の配列を返す。見つからなければnull
var result = pattern.exec('javascript');

// 最後のマッチング文字列。見つからなければNULL。
console.log ( result[0] ); // java

// 括弧で囲まれたサブパターンのマッチング(1, 2, 3.. の上限なし)
console.log ( result[1] ); // ja

// input文字列
console.log ( result['input'] ); // javascript

String.match()

.test() メソッドはもう少しシンプルです。サブパターンのマッチングも参照できません。

var subject = 'javascript';

// 結果情報の配列を返す。見つからなければnull
var result = subject.match('/java/'); 

console.log(result); // java

目的に応じて使い分けられるでしょう。

マッチが見つかるかどうかチェックする

単にマッチするかどうかを知りたい時は、RegExpの.test() メソッドか。Stringの.search() が利用できます。

RegExp.test()

RegExpの.test() を使うと・・・、

var pattern = /(ja)va/;

// true/false を返す。
var result = pattern.test('javascript');

console.log(result);  // true

String.search()

Stringの.search() を使うと・・・、返り値の種類が少し異なります。

var subject = 'javascript';

// マッチングの位置を整数で返す。見つからない時は-1
var result = subject.search('/java/');
console.log(result); // 0

それぞれ、似てるけど動作が異なり少し紛らわしいですね。

マッチ文字列を置換する

マッチングを置換するには、Stringのreplaceを使います。戻り値として新しい文字列オブジェクトが返されます。(もとの文字列は変更されません)

String.replace()

var subject = 'Javascript is flexible.';

// 単純な置換。iは大文字小文字を無視するオプション。
var result = subject.replace('/java/i', 'Action' ); 
console.log(result); // Actionscript is flexible.


// カッコ内のサブパターンを後方参照
var result = subject.replace('/(Java).*(easy)/', '$1 is not so $2.' );
console.log(result); // Java is not so flexible.

// グローバルな置換。最初の置換で処理が止まらず、何度でも置換する
var result = subject.replace('/o/g', 'O' );
console.log(result); // Java is nOt sO flexible.

RegExpを使って置換もできますが、上記String関数は幾分シンプルに記載できるでしょう。

Javascript 正規表現関数の一覧

Javascript において利用可能な、正規表現関数の一覧です。

RegExp

メソッド説明
.exec()文字列中で一致するものを検索する。結果情報の配列を返す
.test()文字列中で一致するものがあるかをテストする。true または false を返す

String

メソッド説明
.match()文字列中で一致するものを検索する。結果情報の配列を返します。マッチしない場合は null を返す
.search()文字列中で一致するものがあるかをテストする。マッチした場所のインデックスを返します。検索に失敗した場合は -1 を返す。
.replace()文字列中で一致するものを検索し、マッチした部分文字列を別の部分文字列に置換する。
.split()正規表現または固定文字列を用いて文字列を分割し、部分文字列の配列に入れる。
Regex オブジェクト生成における、new とリテラル

どちらを使うべき?

実際どちらでも良いのですが、もし大きな違いがあるとすれば、Javascript においては、正規表現でURL文字列を扱う事も多いのではないでしょうか?そのような場合、RegExpコンストラクタ関数を使えば、URLに頻出するスラッシュをエスケープしなくて済みますので、正規表現パターンを読みやすく記述できるでしょう。もしスラッシュを含まない文字列の操作であれば、リテラル表現を使ったほうがシンプルに記述できるのは言うまでもありません。もちろん、最終的にはお好みです。

リテラル?

初学者にとって、「リテラル(Literal)」とはあまり聞き慣れない言葉かもしれません。リテラルとして表記できる型はプログラミング言語によりますが、例えば、Javascriptにおいて、下記はすべてリテラルによるオブジェクトの生成です。

var num = 1;               // Integer型のリテラル表現
var str = 'javascript';    // String型のリテラル表現
var str = [1, 2, 3];       // Array型のリテラル表現
var re = /javascript/;     // RegExp型のリテラル表現

参考:Wikiペディア:リテラル

参考リンク

基本的な正規表現に関しては、こちらもご一読下さい。

また、正規表現のメタ文字に関しては、こちらにまとめています。

MDNのドキュメントです。詳しく記載されています。

 

 

閉じる