jQuery Logo JavaScript の正規表現/ RegExp

作成日:2015年11月2日

正規表現(Regular Expression)とは

正規表現とは、文字列内で文字の組み合わせを調べるために用いられるパターンで、文字列の操作等に使用します。

また、JavaScript では、正規表現はオブジェクトでもあります。

以下は、String オブジェクトの replace()メソッドで正規表現を使って文字列と正規表現の比較を行い、マッチした部分を新しい文字列で置き換えるサンプルの HTML と CSS です。

<div id="jqs-1">
  <div><p>This is a sample. JavaScript is not Java. Do you like JAVA?</div>
  <button>Do it</button>
</div>
.bg_y {
  background-color: yellow;
}

以下の JavaScript では、ボタンをクリックすると、正規表現リテラルを使ってパターン(/Java/gi)を生成して replace()メソッドでパターンにマッチする文字列を変換しています。

/Java/gi は Java という文字列(i オプションがあるので大文字小文字を無視)にマッチするパターンです(詳細は後述)。

$("#jqs-1 button").click(function() {
  var pattern = /Java/gi;  //正規表現リテラル
  var result = $("#jqs-1 p").text().replace(pattern, "<span class='bg_y'>$&</span>");
  $("#jqs-1 p").html(result);
});    

This is a sample. JavaScript is not Java. Do you like JAVA?

上記実行後の p 要素

<p>This is a sample.<span class="bg_y">Java</span>Script is not<span class="bg_y">Java</span>. Do you like<span class="bg_y">JAVA</span>?
</p>

正規表現の定義

JavaScript の正規表現は、RegExp オブジェクトで表現されます。

RegExp オブジェクトは RegExp() コンストラクタか、 正規表現リテラルを使って生成します。

RegExp() コンストラクタを使った生成

var pattern = new RegExp("a$");

コンストラクタ関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることがわかっている(変数で使用する)場合や、ユーザが入力するなど別のソースからパターンを取得する場合には、コンストラクタ関数を使用します。詳細は「RegExp オブジェクト」を参照してください。

正規表現リテラル

文字列リテラルは、文字列を引用符で囲んで記述しましたが、正規表現リテラルは文字列をスラッシュ(/)で囲んで記述します。

var pattern = /a$/;	

正規表現リテラルでは、スクリプトが評価されるときにその正規表現をコンパイルします。正規表現を定数として残しておくときは、この方法を使用するとよいパフォーマンスが得られます。通常はこの方法で生成するのが一般的です。

上記で生成した RegExp はどちらも、最後が「a」という英字の任意の文字列にマッチします(詳細は後述)。

正規表現のパターンは、一連の文字列で構成されます。英数字などのほとんどの文字列は、そのまま比較されます。

/Java/ という正規表現は、Java という文字列を含む任意の文字列に一致(マッチ)しますが、特別な意味を持つ文字があります。

前述の /a$/ というパターンの先頭の a はそのまま a として比較されますが、2番目の $ は「文字列の最後」を意味する特別な文字(メタ文字)になります。

/a$/ というパターンは、最後が a で終わる任意の文字列を意味します。例えば、Java や area, Florida などの文字列にマッチしまが、JavaScript や ANA にはマッチしません(オプションの指定で大文字小文字を無視する設定もあります)。

以下では、JavaScript の正規表現で使用されるいろいろな文字とメタ文字について見ていきます。

リテラル文字

正規表現は、2種類の文字から成り立っています。以下のメタ文字と呼ばれる特殊な文字と、それ以外のリテラル文字と呼ばれる通常のテキストがあります。

^ $ . * + ? = ! : | \ / () [] {}

正規表現では上記の文字(メタ文字)は特別な意味を持つので、これらを文字そのものとして使う場合は、その文字の前にバックスラッシュを置きます。(バックスラッシュは言語環境によっては、円マークとして表示されます)

例えば正規表現の中で、$ を文字そのものとして表すには、\$ と記述します。

また、正規表現では英数字はそのまま使われますが、バックスラッシュ(\)で始まるエスケープシーケンスの形式で使用するリテラル文字があります。

例えば、改行文字は \n で表します。その他に、以下の表のようなエスケープシーケンスの形式で使用する文字があります。

これら以外にもバックスラッシュで始まる文字がありますが、それらは正規表現として特別な意味を持つ特殊文字(メタ文字)になります。

エスケープシーケンス形式で使用するリテラル文字
文字 意味
英数字 その文字そのもの
\0 NULL文字(\u0000)
\t タブ(\u0009)
\n 改行(\u000A)
\v 垂直タブ(\u000B)
\f 改項(\u000C)
\r 復帰(\u000D)
\xnn 16進数nnで指定されたASCII文字。
\uxxxx 16進数xxxxで指定されたUnicode文字
\cX 制御文字^X

以下は pre 要素の中に記述されたテキストの改行文字とタブ文字をを削除する例です。

<div id="jqs-2">
  <pre>
  This is a sample text.
  abc	def
      ghi
  </pre>
  <button>Do it</button>
</div>

パターンの中の「|」は「または」を意味します。

$("#jqs-2 button").click(function() {
  var pattern = /\n|\t/g;
  var text =  $("#jqs-2 pre").text()
  var result = text.replace(pattern, "");
  $("#jqs-2 pre").text(result);
});
This is a sample text.
abc	def		
	ghi

メタ文字/メタキャラクタ

正規表現では、以下の文字は特別な意味や機能を持たせていることから、メタ文字(メタキャラクタ)と言います。実際には、以下の個々の文字だけではなく、これらと通常の文字との組み合わせやこれらの文字の組み合わせとして使用されます。

^   $   .   *   +   ?   =   !   :   |   \   /   (  )   [  ]   {  }

メタ文字には「文字の集まりを表すもの」、「文字の繰り返しを表すもの」、「特定の文字の種類を表すもの」や「パターンにマッチした部分文字列を変数に格納する」という機能を表すもの等いろいろなものがあります。

また、同じメタ文字であっても、使用する位置や他の文字との関係で複数の意味を使い分けるものもあり、状況に応じて意味を解釈する必要があります。

これだけでは、あまりイメージするのは難しいので、以降では、具体的にそれらの使い方を見ていきます。

文字クラス

個々のリテラル文字を角括弧 [ ] で囲むことで、「文字クラス」というものにまとめることができます。文字クラスは、その中に含まれる任意の1文字に一致します。

角括弧 [ ] 内の先頭にキャレット(^)を指定することで、「否定文字クラス」も定義することができます。否定文字クラスは、角括弧 [ ] 内に含まれている文字以外の文字に一致します。

/[abc]/ はa,b,cのいずれか一文字に一致します。

/[^abc]/ はa,b,cのいずれでもない文字に一致します。

/gr[ea]y/ は grey, gray のいずれかに一致します。

上記は、まず g を探し、次に r を探して、その次に e または a を探して、その後に y を探すという意味です。

また、ハイフン(-)を使って文字の範囲を指定することができます。

/[a-z]/ はLatin文字の任意の小文字に一致します。

/[a-zA-Z0-9]/ は英数字に一致します。
/[a-z0-9A-Z]/ としても同じで、範囲を指定する順番は問いません。

/<h[123456]>/ は <h1>,<h2>,<h3>,<h4>,<h5>,<h6> にマッチします。

/<h[1-6]>/ は /<h[123456]>/ と同じ意味になります。

正規表現にはよく使われる文字クラスがあり、JavaScript ではこれらを特定の文字とエスケープシーケンスを組み合わせたもので指定することができます。 例えば、\sは空白文字やタブ文字などのUnicodeの空白文字を意味する文字クラスです。

角括弧の中でも文字クラスは使用することができます。例えば、/[\s\d]/ は空白文字1文字か数字1文字に一致します。

また、ドット「.」は、任意の文字とマッチする文字クラスを示す略記法です。

正規表現の文字クラス
文字 意味
[・・・] 角括弧内の任意の一文字
[^・・・] 角括弧内の文字以外の任意の一文字
.(ドット) 改行以外の文字。[^\n]と同じ。
\w 任意の単語。(word character)。 [a-zA-Z0-9]と同じ
\W ASCII文字での単語文字以外の文字。[^a-zA-Z0-9]と同じ
\s 任意のUnicode空白文字。
\S Unicode空白文字以外の文字。
\d 任意の数字。[0-9]と同じ
\D 数字以外の文字。[^0-9]と同じ
[\b] リテラルバックスペース(バックスペース文字)(特殊なケース)

ハイフン(-)は、文字クラスの中の先頭以外においてのみメタ文字となります。それ以外(文字クラスの外)の場所では、通常のハイフンの文字(-)とマッチします。

文字クラス内にある疑問符(?)やピリオド(.)、パイプ(|)等は通常はメタ文字ですが、これらが文字クラス内に含まれる場合は、メタ文字と見なされません。? や . または | のメタ文字としての機能が、文字クラスの中では意味を成さないからです。(これらの使い方は後で出てきます)

キャレット(^)は文字クラス外では、行頭指定文字(行の先頭を表す文字)になりますが、文字クラス内の角括弧の直後にある場合は、否定を意味するメタ文字になります(それ以外の位置ではクラス内でも特殊な働きはしません)。

どのメタ文字がサポートされているかという規則は、文字クラスの内部と外部では異なることに注意が必要です。

また、文字クラスの外では、正規表現中の各リテラル文字は「かつ(and)」が間にあるものとして解釈されますが、文字クラス内での各リテラル文字は「または(or)」が間にあるものとして解釈されます。

繰り返し/量指定子

正規表現で2桁の数字は /\d\d/ と表現できますが、もっと桁数が増えたり、任意の桁数を指定する場合などで使える繰り返しを意味するメタ文字があります。

繰り返しは良く使われるので、以下のような繰り返しを指定するための文字が用意されています。

正規表現の繰り返し文字
文字 意味
? 直前の項目をゼロ回または、1回だけ繰り返します。ゼロ回というのは、直前の項目がなくても良いという意味で{0,1}と同じ意味です。
+ 直前の項目を1回以上繰り返します。{1,}と同じ意味です。
* 直前の項目をゼロ回以上繰り返します。{0,}と同じ意味です。
{n,m} 直前の項目を n 回から m 回繰り返します
{n,} 直前の項目を n 回以上繰り返します
{n} 直前の項目を n 回だけ繰り返します

/colou?r/ は、color または colour にマッチします。

/July?/ は、July または Jul にマッチします。

/4(th)?/ は 4 または 4th にマッチします。

/\s+java\s+/ は javaの前後に1つ以上の空白がある文字列にマッチします。

/[^"]*/ は0個以上の引用符のない文字列にマッチします。

/\w{4}\d?/ は4個の単語文字の直後に0個または1個の数字が続く文字列にマッチします。

/\d{3,5}/ は3桁から5桁の数字にマッチします。

最短マッチ

基本的に正規表現は貪欲(greedy)でマッチしうる最大(最長)の文字列にマッチします。

* や + を使う場合に、最短でマッチさせるには、* や + の後に ? を付けます。

以下の例では、/<div class='inside'>.*<\/div>/ でマッチさせると、2つ目の div 要素の閉じタグまで含まれてしまいますが、/<div class='inside'>.*?<\/div>/ とすることで、最短のマッチを取得することができます。

var html = "<div class='outside'><div class='inside'>some text or html</div></div>";
var greedy_pattern = /<div class='inside'>.*<\/div>/;
var greedy_result = greedy_pattern.exec(html);
alert(greedy_result[0]);  //<div class='inside'>some text or html</div></div>

var nongreedy_pattern = /<div class='inside'>.*?<\/div>/;
var nongreedy_result = nongreedy_pattern.exec(html);
alert(nongreedy_result[0]);  //<div class='inside'>some text or html</div>

選択

メタ文字の「|」は、「または」という意味を持ちます。これを使うことにより、構成要素の個々の表現のいずれかにマッチさせることができます。

例えば、Bob と Robert は異なる2つの表現ですが、 /Bob|Robert/ とするとそのどちらかにマッチする1つの表現になります。このように組み合わされた部分パターンを「選択(alternative)」と言います。

文字クラスを使った /gr[ea]y/ は、選択を使って /grey|gray/ や選択肢をくくる丸括弧を使って /gr(e|a)y/ と書くことができます。

但し、/gr[e|a]y/ とすると文字クラス内では、| は通常の文字と解釈されてしまうので、意味が異なってしまいます。

/gr(e|a)y/ という表現では、丸括弧が必要です。丸括弧を使わずに /gra|ey/ とすると、gra または ey という意味になってしまいます。

丸括弧を使うことで、選択の対象範囲を制限(グループ化)することができます。

また、選択に関しては左から右に比較が行われるので、左側の代替表現が一致した場合は、 右側の代替表現は無視されます。このため、もし /a|ab/ というパターンで ab という文字列に比較を行うと、最初の文字の a だけに一致してしまいます。

丸括弧(グループ化・参照)

グループ化

丸括弧 ( ) にはいくつかの意味がありますが、複数の項目を1つの部分表現にまとめる(グループ化する)という意味があります。 まとめられた部分表現は、*、+、? などでも1つとして扱われます。

/(AB|CD)+|EF/ は「AB と CD のどちらか一方の1回以上の繰り返し」または、「EF」のどちらかという意味になります。

また、丸括弧で部分パターンを囲むことによって、その部分にマッチしたテキストを記憶することができます。

例えば、 1個以上の小文字とその後ろに1個以上の数字がくるパターンは、/[a-z]+\d+/ と記述できますが 最後の数字だけを後で使用したい場合、括弧で囲んで /[a-z]+(\d+)/ と書けば、一致したパターンから 数字だけを取り出すことができます。(後のメソッドの項で説明します)

参照

さらに、括弧には正規表現内の部分表現を後で参照するという意味もあります。 これは、\ の後ろに数字を指定して行います。この数字は、正規表現内で括弧に囲まれた部分表現の位置を示すものです。例えば \1 は1番目の部分表現を指します。 なお、部分表現は入れ子にできるので、左側の括弧の位置で順番を数えます。

/([Java([Ss]cript)?)\sis\s(fun)/ では ([Ss]cript) は\2で参照できます。

部分表現を参照するというのは、部分表現に対応するパターンを参照するのではなく、そのパターンにマッチするテキストを参照するという意味になります。これにより、文字列の異なる部分で、同じ文字列が含まれる条件を指定することができます。

単一引用符または二重引用符に囲まれた任意の文字は以下のように記述できます。但し、この場合は開始と最後の引用符が違っていてもかまわないことになります。

/['"][^'"]*['"]/

しかし、次のように記述すると、引用符も一致していなくてはならなくなります。\1は最初の括弧で囲まれた部分表現です。

/(['"])[^'"]*\1/

但し、文字クラス中から部分表現を参照することは文法上許されないので次のように記述することはできません。

/(['"])[^\1]*\1/

(?: ) を使ってグループ化すると、この丸括弧はその部分にマッチしたテキストを記憶しません(参照を生成させません)。グループ化のみで、一致する文字を記憶させないことができます。

/([Java(?:[Ss]cript)?)\sis\s(fun)/ では (fun) は\2で参照できます。

選択、グループ化、参照に使用する文字
文字 意味
| 選択。この記号の左右どちらかに一致します。左から右に比較が行われるので、左側の代替表現が一致した場合は、 右側の代替表現は無視されます。
( ) グループ化。複数の項目をまとめ、* , + , ? , | 等の対象とします。またこのグループに一致する文字を記憶しておき、後で参照できるようにします。
(?: ) グループ化のみを行います。このグループに一致する文字は記憶しません(参照の対象になりません)。
\n グループ番号 n で指定された部分表現に一致した文字列にマッチします。部分表現は丸括弧で囲まれたものになります。グループ番号は、左側の括弧が何番目かで判断します。但し、(?: ) でグループ化されたものは、数えません(対象になりません)。

位置の指定

正規表現の中には、個々の文字ではなく、文字間の位置にマッチするものがあり、アンカーと呼ばれます。

\b は単語境界(単語文字 \w と単語以外の文字 \W との境界)または、文字列の先頭や末尾と単語文字の境界を指します。言い換えると単語の区切りにマッチします。この時、マッチした単語の区切り(空白等)は、マッチした部分に含まれません。

但し、文字クラス中では \b はバックスペース文字に一致します。

よく使われるアンカーには、文字列の先頭にマッチする ^ や、文字列の最後にマッチする $ があります。

例えば、JavaScript という単語だけの行を探すには /^JavaScipt$/ とします。

Java という単語だけを探すには、 /\bJava\b/ とします。

\B は単語境界以外の位置にマッチするので、/\B[Ss]cript/ とすると JavaScript や shellscript にはマッチしますが、Script や scripting にはマッチしません。

また、任意の正規表現を位置指定に利用することもできます。

(?= と ) で囲むと先読み言明(lookahead assertion)になり、以降の文字が (?= と ) で囲まれた正規表現と一致する必要があります。但し、 (?= と ) で囲まれた部分は、正規表現にマッチした文字列には含まれません。

例えば、JavaScript の後にコロン(:)が続く場合のみ、JavaScript に一致させるには、/JavaScript(?=\:)/ とします。このパターンは JavaScript:Handbook の JavaScript には一致しますが、 JavaScript Handbook の JavaScript には一致しません(コロンがないから)。

(?= の代わりに (?! を使うと、否定先読み言明(negative lookahead assertion)となり、以降の文字はマッチしてはならないことを意味します。

例えば、/Java(?!Script)([A-Z]\w*)/ は Java の後に大文字が1文字続き、その後に任意の文字が続く文字列にマッチします。但し、Java の直後に Script という文字列が続く場合はマッチしません。 JavaUser にはマッチしますが、 JavaScript, JavaScriptor, Javacoffee には一致しません。

正規表現のアンカー文字
文字 意味
^ 文字列の先頭。マルチラインモードでは、行の先頭。
$ 文字列の末尾。マルチラインモードでは、行の末尾。
\b 単語境界。\w文字と\W文字との間の位置、または、 \w文字と文字列の先頭または末尾の間の位置。 文字クラスの中で、[\b]とするとバックスペースを意味する。
\B 単語境界ではない位置。
(?=p) 先読み言明。後に続く文字がパターン p に一致することが必要条件。但し、パターン p に一致した部分の文字列は、 比較結果に含まれない。
(?!p) 否定先読み言明。後に続く文字がパターン p に一致しないことが必要条件

フラグ

JavaScript の正規表現には、いくつかのフラグを指定することができます。

フラグを指定する位置は2番目のスラッシュの後に指定します。フラグは組み合わせて指定することが可能です。

例えば、Java, java JAVA, JaVa のように、大文字と小文字を区別せず、一致する全ての単語を検索するには、/\bjava\b/gi と記述します。

  • 大文字と小文字を区別したくない場合は、ignoreCase を意味する i というフラグを指定します。
  • 一致する文字列を全て検索したい場合は、global を意味する g というフラグを指定します。
  • m というフラグを指定すると、マルチラインモードで検索が行われます。

マルチラインモードが指定され、検索対象の文字列に改行が含まれている場合、^ と $ のアンカー文字は、検索文字列の任意の行の先頭と最後を指します。

正規表現のフラグ
文字 意味
i 大文字と小文字を区別しない。(ignoreCase の i)
g グローバル検索。最初に一致したものだけではなく一致するもの全てを検索します。
m マルチラインモードにする。^は文字列の先頭と行の先頭に、$は文字列の末尾と行の末尾に 一致するようになります。

String オブジェクトのメソッド

String オブジェクトには、正規表現を使用する以下のようなメソッドがあります。

replace() メソッド

replace() メソッドは、指定されたパターンに一致する文字列を検索して、指定された文字列で置き換えます。

書式

str.replace(regexp|substr, replacement|function)

パラメータと戻り値

str
置換対象とする String オブジェクトまたはリテラル文字列を指定します。

1番目の引数

検索する文字列の正規表現、または文字列

regexp
置換のパターンを表すRegExp オブジェクト。 マッチした文字列は、2つ目の引数の値(文字列、または関数による戻り値)によって置き換えられます。
substr
replacement によって置き換えられる文字列を指定します。

2番目の引数

置き換える文字列(または関数)

replacement
置換テキストを表す文字列(置換文字列)。ドル記号($)はこの置換文字列では特殊な意味を持ちます。(詳細は後述/置換パターンを参照)
function
新しい部分文字列を作成するために実行される関数を指定します。(詳細は後述/引数としての関数の指定を参照)
戻り値
最初またはすべてのマッチングで replacement によって置換された新しい文字列を返します。
  • g 属性が指定された場合は一致した文字列全てを置き換えます。
  • 1番目の引数が正規表現ではない場合、文字列そのものが検索されます。 search() とは異なり、正規表現に変換はされません。
  • このメソッドは、それを呼び出した String オブジェクトを変化させません。単純に新しい文字列を返します。

置換パターン

置換文字列(replacement)には以下の特殊な置換パターンを含めることができます。

置換パターン
文字 置換
$$ "$" (文字としてのドル記号)を挿入します。
$& マッチした部分文字列を挿入します。
$` マッチした部分文字列の直前の文字列の部分(左側の文字列)を挿入します。
$' マッチした部分文字列の直後の文字列の部分(右側の文字列)を挿入します。
$1,$2, ... $9 第一引数が RegExp オブジェクトだった場合、最初から9番目までの括弧でキャプチャされたサブマッチの文字列(カッコ付きサブ表現の文字列)を挿入します。

以下はそれぞれの p 要素のテキストの中の javascipt という文字を検索して(大文字小文字を無視)、「JavaScript」という言葉の中の大文字小文字表記を統一する例です。

<div id="jqs-6">
  <p>JavAScript is JavaScRiPt.</p>
  <p>JAVASCRIPT is fun!</p>
  <p>I am studying about javascript.</p>
  <button>Replace</button>
</div>

それぞれの p 要素について、replace() メソッドを行うため each() を使っています。

$("#jqs-6 button").click(function() {
  var pattern = /javascript/gi;
  $("#jqs-6 p").each(function() {
    $(this).html($(this).text().replace(pattern, "JavaScript"));
  });
});

JavAScript is JavaScRiPt.

JAVASCRIPT is fun!

I am studying about javascript.

以下は「Johnny Smith」という名前を「Smith, Johnny」という形式に置換する例です。

<div id="jqs-7">
  <p>Johnny Smith</p>
  <button>Replace</button>
</div>
$("#jqs-7 button").click(function() {
  $("#jqs-7 p").text($("#jqs-7 p").text().replace(/(\w+)\s*(\w+)/, "$2, $1"));
});

Johnny Smith

以下はそれぞれの p 要素のテキストの中の javascipt という文字を検索して(大文字小文字を無視)、java にマッチする部分は strong 要素で囲んで、javascipt にマッチする部分を span 要素で囲む例です。一番目の括弧は $1, 二番目の括弧は $2 で参照しています。

<div id="jqs-6">
  <p>JavaScript is not Java.</p>
  <p>JAVASCRIPT is fun!</p>
  <p>I am studying about javascript.</p>
  <button>Replace</button>
</div>
$("#jqs-8 button").click(function() {
  var pattern = /(java)(script)/gi;
  $("#jqs-8 p").each(function() {
    $(this).html($(this).text().replace(pattern, "<span class='bg_y'><strong>$1</strong>$2</span>"));
  });
});  

JavaScript is not Java.

JAVASCRIPT is fun!

I am studying about javascript.

以下はそれぞれの p 要素のテキストの中のシングルクオートまたはダブルクオートで囲まれた文字列を strong 要素で囲む例です。

<div id="jqs-9">
  <p>"Hello, World!" he said.</p>
  <p>'Hello, Universe!' she said.</p>
  <button>Replace</button>
</div>

マッチした部分文字列を $& で参照しています。

/(['"])[^'"]*\1/g はシングルクオートまたはダブルクオートで囲まれた文字列を表すパターンです。「参照」の項を参照ください。

$("#jqs-9 button").click(function() {
  var pattern = /(['"])[^'"]*\1/g;
  $("#jqs-9 p").each(function() {
    $(this).html($(this).text().replace(pattern, "<strong>$&</strong>"));
  });
});

"Hello, World!" he said.

'Hello, Universe!' she said.

引数としての関数の指定

第二引数として関数を指定することができます。このとき、関数はマッチが完了された後に実行されます。

関数呼び出しの結果(返り値)は、置換文字列として使われます(前述の特殊な置換パターンはこの場合には適用されません)。

第一引数の正規表現がグローバルの場合、置換されるべきマッチごとに関数が複数回実行されることがあるので注意が必要です。

関数に与えられる引数
引数名 与えられる値
match マッチした部分文字列(前述の特殊な置換パターンの $& に対応)。
p1, p2, ... 第一引数が RegExp オブジェクトだった場合、n 番目の括弧でキャプチャされたサブマッチの文字列(前述の特殊な置換パターンの $1, $2, などに対応)。例えば /(\a+)(\b+)/ が与えられた場合、p1 は \a+ に対するマッチ、p2 は \b+ に対するマッチとなります。
offset マッチした部分文字列の、分析中の文字列全体の中でのオフセット(文字列全体が 'abcd' で、マッチした部分文字列が 'bc' ならば、この引数は 1 )。
string 分析中の文字列全体

以下は、li 要素内に出現する全ての大文字を小文字に変換して、ハイフンをマッチした位置の直前に挿入する例です。

<div id="jqs-10">
  <ul>
    <li>marginTop</li>
    <li>maxWidth</li>
    <li>paddingLeft</li>
  </ul>   
  <button>Replace</button>
</div>

置換する関数 my_replace() はマッチした部分文字列(match)をその関数の引数として受け取ります。そして、その引数を小文字に変換し直前にハイフンを連結して戻り値にしています。

toLowerCase() は文字列を小文字に変換する String オブジェクトのメソッドです。

function my_replace(match) {
  return '-' + match.toLowerCase();
}
$("#jqs-10 button").click(function() {
  $("#jqs-10 li").each(function() {
	  $(this).text($(this).text().replace(/[A-Z]/, my_replace));
  });
});
  • marginTop
  • maxWidth
  • paddingLeft

以下は英字([a-zA-Z])と記号文字([^\w])と数字(\d)の間にハイフンを挿入する例です。

<div id="jqs-11">
  <ul>
    <li>Abc#$%367</li>
    <li>FDR***009</li>
    <li>Zen@777</li>
  </ul>   
  <button>Replace</button>
</div>

引数としての関数(my_replacer)の引数には、match, p1, p2, p3 を指定しています。

  • p1 には1番目の括弧でキャプチャされたサブマッチの文字列(英字)
  • p2 には2番目の括弧でキャプチャされたサブマッチの文字列(記号文字)
  • p3 には3番目の括弧でキャプチャされたサブマッチの文字列(数字)が与えられます。

この関数では、引数の match を処理で使用していませんが、この順番で記述しないとなりません。p1,p2, p3 は括弧でキャプチャした数にあわせます。

console.log(arguments); を関数内で実行すると、引数の内容を確認できます。

join() は、配列要素を文字列に変換し、それらを連結するメソッドです。

function my_replacer(match, p1, p2, p3) {
  //console.log(arguments); 引数をコンソールに出力
  return [p1, p2, p3].join(' - ');
}
$("#jqs-11 button").click(function() {
  $("#jqs-11 li").each(function() {
	  $(this).text($(this).text().replace(/([a-zA-Z]*)([^\w]*)(\d*)/, my_replacer));
  });
});
  • Abc#$%367
  • FDR***009
  • Zen@777

match() メソッド

match() メソッドは指定されたパターンを検索して一致した結果を格納した配列を戻します。

書式

str.match(regexp)

パラメータと戻り値

str
検索対象とする String オブジェクトの名前またはリテラル文字列を指定します。
regexp
正規表現パターンおよび適用できるフラグを含む、正規表現オブジェクトを指定します。引数に正規表現以外を指定すると、RegExp()コンストラクタに 渡して正規表現に変換した上で比較が行われます。
戻り値
マッチの結果を含む配列を返します。配列の内容は、regexp が g 属性を伴うグローバルな正規表現かどうかによって異なります。何も見つからなければ、match() メソッドは null を返します。また、match() メソッドから返される配列には、他の配列と同じように lenght プロパティがあります。
戻り値に論理否定演算子(!)を使って !str.match(regexp) のようにすると、マッチした場合は false が、マッチしない場合は true が返ります。(2重否定演算子を使うとその逆になります)

regexp が g 属性を伴わない場合

  • match() メソッドは文字列でマッチングを1つ検索します。
  • 配列の要素 0 にはマッチした文字列全体が入ります。
  • その他の要素(要素 1 から n )には、マッチした配列内のカッコの付きのサブ表現のテキストが入ります。
  • この動作は、グローバル フラグが設定されていない場合の exec() メソッドの動作と同じです。
  • match() メソッドが返す配列には input、および index の 2 つのプロパティがあります。
  • input プロパティには、検索された文字列全体が格納されます。
  • index プロパティには、検索された文字列内の一致した部分文字列の位置が格納されます。

regexp が g 属性を伴う場合

  • match()メソッドはグローバル検索を行い、マッチするサブ表現をすべて検索し、一致した全ての文字列を含む配列を返します。
  • グローバル検索の場合は、配列要素にはマッチした文字列内の各サブ表現が入ります。
  • つまり、要素 0 から n には一致したすべての文字列がそれぞれ格納されます。
  • この場合、返される配列には index プロパティや input プロパティはありません。

グローバル検索で、カッコの付きのサブ表現を利用したい場合は、exec() メソッドを使用します。

以下は、URL を解析するサンプルです。

<div id="jqs-12">
  <p><a href="http://www.webdesignleaves.com/wp/" target="_blank">http://www.webdesignleaves.com/wp/</a></p>
  <ul>
    <li>result[0] : <span class="url"></span></li>
    <li>result[1] : <span class="protcol"></span></li>
    <li>result[2] : <span class="host"></span></li>
    <li>result[3] : <span class="path"></span></li>
    <li>result.input : <span class="input"></span></li>
    <li>result.index  : <span class="index"></span></li>
    <li>result.length : <span class="length"></span></li>
  </ul>
  <button>Match</button>
</div>

a 要素の href 属性を変数(text)に、URL を検索する正規表現パターンを変数(url)に格納して g 属性なしで match() を実行します。

サブ表現(サブマッチ)は URL のプロトコル、ホスト、パスの部分を検索します。

戻り値(result)が null でない場合に戻り値の値をそれぞれ表示します。

また、戻り値(result)のプロパティについてもそれぞれ表示します。

$("#jqs-12 button").click(function() {
  var text = $("#jqs-12 a").attr('href'); 
  var url = /(\w+):\/\/([\w.]+)\/(\S*)/;
  var result = text.match(url);
  if(result != null){
	$("#jqs-12 span.url").text(result[0]);	
	$("#jqs-12 span.protcol").text(result[1]);	
	$("#jqs-12 span.host").text(result[2]);	
	$("#jqs-12 span.path").text(result[3]);	
	$("#jqs-12 span.input").text(result.input);	
	$("#jqs-12 span.index").text(result.index);	
	$("#jqs-12 span.length").text(result.length);		
  }
});

http://www.webdesignleaves.com/wp/

  • result[0] :
  • result[1] :
  • result[2] :
  • result[3] :
  • result.input :
  • result.index :
  • result.length :

以下は、p 要素のテキストで java または javascript という文字列が含まれるものを検索して、それらを li 要素として表示させるサンプルです。

<div id="jqs-13">
  <p>JavaScript is fun!</p>
  <p>JavaScript is not Java.</p>
  <p>J-a-v-aaaa</p>
  <p>Do you like Java coffee ?</p>
  <button>Match</button>
</div>

div 要素(id="jqs-13")の HTML を変数(html)に格納します。

/<p>.*java(script)?.*<\/p>/gi は java または javascript という文字列が含まれる p 要素を表すパターンです。

変数 result には、マッチした p 要素の HTML が配列として格納されています。

変数 result が null ではない場合、配列の長さの分だけ for 文を実行します。

for 文の中では、それぞれの配列の要素に対して、p 要素の中の文字列(括弧で指定したサブマッチ)を li 要素として作成して、ul 要素に追加します。

ul 要素に全てが追加されたら、ul 要素を div 要素(id="jqs-13")に追加します。

$("#jqs-13 button").click(function() {
  var html = $("#jqs-13").html();
  var pattern = /<p>.*java(script)?.*<\/p>/gi;
  var result = html.match(pattern);
  var ul = $("<ul></ul>");
  if(result != null){
    for(var i = 0; i < result.length; i ++) {
      ul.append("<li>" + (result[i].match(/<p>(.*)<\/p>/))[1] + "</li>");
    }
  }
  $("#jqs-13").append(ul);
});

JavaScript is fun!

JavaScript is not Java.

J-a-v-aaaa

Do you like Java coffee ?

論理否定演算子(!)を使って真偽値に変換

match() は、マッチの結果を含む配列を返しますが、何も見つからなければ、null を返します。戻り値に論理否定演算子(!)を使って真偽値に変換することができます。

<div id="jqs-13-2">
  <p>PHP</p>
  <p>Java</p>
  <p>C++</p>
</div>

上記のような HTML がある場合、以下のように論理否定演算子(!)を使うと、マッチした場合は false に、マッチしなかった場合は true になります。

$("#jqs-13-2 p").each(function() {
 console.log(!$(this).text().match(/Java/));
});

//true 
//false 
//true

2重否定を使うと、マッチした場合は true に、マッチしなかった場合は false になります。

$("#jqs-13-2 p").each(function() {
 console.log(!!$(this).text().match(/Java/));
});

//false
//true
//false

split() メソッド

split() メソッドは指定された引数を区切り文字として使用し、文字列をいくつかに分割します。

書式

str.split(separator, limit)

パラメータと戻り値

str
分割する String オブジェクトの名前またはリテラル文字列を指定します。 このオブジェクトは、split メソッドでは変更されません。
separator
文字列を区切る 1 つ以上の文字を表す文字列または Regular Expression オブジェクトを指定します。 省略した場合、文字列全体を含む単一要素の配列が返されます。空の文字列("")が指定されると、返される配列では文字列の各文字が区切り要素となり、1文字ずつに分割されます。
limit
配列に返される要素の数を制限する値を指定します。(オプション)
戻り値
str を separator の位置で分割してできた部分文字列の配列を返します。 separator は、配列要素の一部としては返されません。
  • separator が、キャプチャする括弧を含む正規表現だった場合、マッチしたキャプチャする括弧の結果(任意の undefined となった結果を含む)である各回の区切りが出力配列に結合されます。
  • 文字列が空であるとき、split() メソッドは、空の配列ではなく、1 つの空文字列を含む配列を返します。

以下は、p 要素内に記述されている E-mail アドレスを @ で分割して表示させるサンプルです。

<div id="jqs-14">
  <p class="email">john_smith@example.com</p>
  <p>result[0]: <span class="result_0"></span></p>
  <p>result[1]: <span class="result_1"></span></p>
  <button>Match</button>
</div>
$("#jqs-14 button").click(function() {
  var result = $("#jqs-14 p.email").text().split('@');
  $("#jqs-14 span.result_0").text(result[0]);
  $("#jqs-14 span.result_1").text(result[1]);
});

result[0]:

result[1]:

split() メソッドは、引数に正規表現も指定できます。次の例は、任意の数の空白文字を含む区切り文字を指定する例です。

"1,2,   3,    4,   5".split(/\s*,\s*/);	
//実行結果は["1","2","3","4","5"]

separator(区切り文字)が指定されなかった場合、文字列は分割されず、1つの要素のみを持ち、その要素が元の文字列という配列が返されます。

空の文字列("")が separator として指定されると、返される配列では文字列の各文字が区切り要素となり、1文字ずつに分割されます(改行文字等も含む)。

また、separator がキャプチャする括弧を含む場合、マッチした結果が戻り値の配列に含まれます。

以下のサンプルでは、separator(区切り文字)に、何も指定しなかったり、空文字を指定したり、正規表現を指定した場合等に、どのように分割されるかを表示します。

<div id="jqs-15">
  <pre class="target">ABC,   DE,  F, G,  HIJ, 
  KLM, Nop,     qrs,          tuvwx
  </pre>
  <pre class="display"></pre>
  <p class="cmd"></p>
  <p>length: <span class="length"></span></p>
  <select name="pattern">
    <option value="1">なし</option>
    <option value="2">""(空文字)</option>
    <option value="3">","</option>    
    <option value="4">"/\s*,\s*/"</option>
    <option value="5">"/(\s*,\s*)/"</option>
  </select>
  <button>Split</button>
</div>

分割された結果の配列は、console.log(result); でコンソールにも表示されます。

var pattern ="";
var result ="";
$("#jqs-15 button").click(function() {
  pattern =$("#jqs-15 [name='pattern']").val(); 
  switch(pattern) {
    case "1" :
      result = $("#jqs-15 pre.target").html().split();
      $("p.cmd").text('result = $("pre.target").html().split()');
      break;
    case "2" :
      result = $("#jqs-15 pre.target").html().split("");
      $("p.cmd").text('result = $("pre.target").html().split("")');
      break;
    case "3" :
      result = $("#jqs-15 pre.target").html().split(",");
      $("p.cmd").text('result = $("pre.target").html().split(",")');
      break;
    case "4" :
      result = $("#jqs-15 pre.target").html().split(/\s*,\s*/);
      $("p.cmd").text('result = $("pre.target").html().split(/\s*,\s*/)');
      break;
    case "5" :
      result = $("#jqs-15 pre.target").html().split(/(\s*,\s*)/);
      $("p.cmd").text('result = $("pre.target").html().split(/(\s*,\s*/))');
      break;
    default : 
  }
  console.log(result);
  var html = "";
  for(var i = 0; i < result.length; i ++) {
    html += result[i];
  }
  $("#jqs-15 pre.display").html(html);
  $("#jqs-15 span.length").text(result.length);
});
ABC,   DE,  F, G,  HIJ, 
  KLM, Nop,     qrs,          tuvwx
  

        

result.length:

RegExp オブジェクト

JavaScript の正規表現は、RegExp オブジェクトで表現されます。RegExp オブジェクトは、RegExp() コンストラクタの他に3つのメソッドといくつかのプロパティをサポートしています。

参考:RegExp インスタンスのプロパティ

但し、現在 RegExp オブジェクトのプロパティでは非推奨になっているものが、かなりあるので注意が必要です。「非推奨の RegExp プロパティ」を参照ください。

RegExp() コンストラクタは1個または2個の文字列引数を取り、新たに RegExp オブジェクトを生成します。

var regex = new RegExp("pattern", "flags");

パラメータと戻り値

pattern
正規表現のテキスト。正規表現を文字列リテラルとして RegExp() コンストラクタに渡す場合は、 「\」を「\\」に置き換える必要があります。
flags(オプション)
次の値を任意の組み合わせで指定できます。
  • g :グローバルなマッチ
  • i :大文字・小文字の無視
  • m :複数行に渡るマッチ
戻り値
RegExp オブジェクト。

コンストラクタ関数を使うとき、通常の文字列のエスケープルール(文字列の中に \ 付きの特別な文字列が含まれているときにはその文字をエスケープするルール)に従う必要があります。

以下は等価です。

var regex = new RegExp("\\w+");
var regex = /\w+/;

リテラルフォーマットでの引数はクォーテーションで囲みませんが、コンストラクタ関数での引数はクォーテーションで囲む必要があります。

以下は等価です。

var regex = /ab+c/i;
var regex = new RegExp("ab+c", "i");

コンストラクタ関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることがわかっている(変数で使用する)場合や、ユーザが入力するなど別のソースからパターンを取得する場合には、コンストラクタ関数を使用します。

サンプル

HTML ソースをページに表示させる際、そのままソースを記述してしまうと、HTML 要素として解釈されてしまうので、「< 」や「 >」 は変換(エスケープ)しておく必要があります。

1つ1つ変換することもできますが、以下のようなフォームを作成して、簡単に変換できるようにします。

この時、正規表現を使って「< 」や「 >」の文字を変換するのですが、以下では正規表現パターンを変数に入れて使用するので、コンストラクタ関数を使用します。

  • textarea 要素(id=”input”):ソースを入力する部分
  • button 要素(id=”convert” と id=”clear”):変換または内容をクリアするためのボタン
  • pre 要素(id=”escapeHTML”):エスケープ処理(変換)された文字列を表示する部分
<p>HTML ソースを入力</p>
<div>
  <textarea id="input" rows="5" cols="60">
  </textarea>
</div>
<button id="convert">変換</button>
<button id="clear">クリア</button>
<div>
  <pre id="escapeHTML"></pre>
</div>

変数 targets には、変換対象の文字の配列を代入します。

変数 escapes には、変数 targets の文字列に対応する変換文字(文字参照)の配列を代入します。

textarea 要素(id="input")に入力された文字列は $('#input').val() で取得できるので、それを変数 converted に代入します。

textarea 要素に入力された文字列を replace() メソッドを使って変換対象の文字をそれぞれ「&lt;」「&gt;」「&quot;」「&#39;」「&amp;」(文字参照)に変換します。

変換する際の順番は、最初に「&」を変換します(全ての文字参照に「&」が含まれているため)。

for 文を使って、変換対象の文字の数の分だけ、replace() を使って文字を変換しています。この時、targets[i] を利用してパターンを生成しますが、このような場合は、コンストラクタ関数を使用します。正規表現リテラルを使ってはうまく行きません。

var targets = ["&", "<", ">" ,'"', "'"];
var escapes = ["&amp;", "&lt;", "&gt;", "&quot;", "&#39;"];

$('#convert').click(function() {
  var converted = $('#input').val();
  for(var i=0; i<targets.length; i++){ 		 
    converted = converted.replace(new RegExp(targets[i], 'g'), escapes[i]);
  }		
  $('#escapeHTML').text(converted);
});	

$('#clear').click(function() {
  $('#input').val('');	
  $('#escapeHTML').text('');
});	

6行目から8行目の for 文を以下のように正規表現リテラルを使って記述するとうまく行きません。

for(var i=0; i<targets.length; i++){ 		 
  converted = converted.replace(/targets[i]/, 'g'), escapes[i]);
}
または
for(var i=0; i<targets.length; i++){ 	
  var target = '/' + 	targets[i] + '/';
  converted = converted.replace(target, 'g'), escapes[i]);
}

「/」と「/」で囲まれたパターン文字列の中に変数を使いたい場合は、new RegExp を使って正規表現オブジェクトを生成するようにします。

HTML ソースを入力


        

exec() メソッド

exec() メソッドは match() メソッドによく似ています。 match() は RegExp を引数に取る String のメソッドですが、exec() は文字列を引数にとる RegExp のメソッドです。

exec()メソッドは特定の文字列でのマッチのための検索を実行し、結果の配列、あるいは、null を返します。

書式

regexp.exec(str);

パラメータと戻り値

regexp
検索に使用する正規表現のパターンと適用できるフラグを格納した Regular Expression オブジェクトのインスタンスです。(正規表現リテラル、または変数)
str
検索対象とする String オブジェクトの名前またはリテラル文字列を指定します。
戻り値
パターンに一致する文字列が見つからなかった場合、exec() メソッドは null を返します。 一致する文字列が見つかった場合は、exec() は配列を返します。

exec() メソッドは、指定された文字列を検索し、一致する文字列が見つからない場合は null を返します。 一致する文字が見つかった場合は、配列を返します。これはグローバル指定なしの match() メソッドが返す配列と同じです。

配列の要素0には、正規表現に一致した文字列が格納され、続く配列の要素には、括弧で囲まれた部分表現に一致した文字列が格納されます。

exec() メソッドが返す配列には、input、index の 2 つのプロパティがあります。index プロパティは最初に一致した文字位置が入り、input プロパティには、検索された文字列全体が格納されます。

また、regexp(検索に使用する正規表現)には、lastIndex プロパティがあり、一致文字列の末尾の文字に続く位置が格納されます。

exec() メソッドと match() メソッドの違い

exec() メソッドと match() メソッドの違いは、exec() メソッドはグローバル指定の g フラグの有無に関わらず同じ配列を実行結果として返すということです。

  • gフラグのついた正規表現に対して exec() メソッドを使用すると、一致した文字列の直後の文字位置を RegExp オブジェクトの lastIndex プロパティに設定します。
  • 同じ RegExp オブジェクトで exec() をもう一度呼び出すと、lastIndex プロパティが 示す文字位置から検索を開始します。
  • 一致が見つからなかった場合は、lastIndex プロパティに0を設定します。

この振る舞いを利用すると、exec() を繰り返し呼びだすことで、文字列の全てのマッチを調べることができます。

以下は、gフラグのついた正規表現(/Java/g)に対して、exec() メソッドを使用する例です。

<p>実行結果</p>
<p>Matched (result[0]) : <span class="result_0"></span></p>
<p>At position (result.index) : <span class="result_index"></span></p>
<p>Next search begins at  (pattern.lastIndex) : <span class="pattern_lastIndex"></span></p>

9行目の while((result = pattern.exec(text)) != null) でマッチがなくなるまで、exec() を繰り返し呼びだしています。

var pattern = /Java(Script)?/g;  //正規表現
var text = "Is Java more fun than JavaScript?";  //対象のテキスト
var result;  //戻り値の配列
var result_0 ="";  //配列の要素0
var result_1 ="";  //配列の要素1(サブマッチ)
var result_index ="";  //配列の index プロパティ
var pattern_lastIndex ="";  //正規表現の lastIndex プロパティ
var count = 1;
while((result = pattern.exec(text)) != null){	  
  result_0 += (count + "回目: " + result[0] + " / ");
  result_1 += (count + "回目: " + result[1] + " / ");
  result_index += (count + "回目: " + result.index + " / ");
  pattern_lastIndex += (count + "回目: " + pattern.lastIndex + " / "); 
  count ++; 
}
$("span.result_0").text(result_0);
$("span.result_1").text(result_1);
$("span.result_index").text(result_index);
$("span.pattern_lastIndex").text(pattern_lastIndex);

実行結果

最後にマッチした文字 (result[0]) :

括弧で囲まれた部分文字列のマッチ (result[1]) :

文字列のマッチ位置(result.index) :

次のマッチが始まる位置 (pattern.lastIndex) :

lastIndex プロパティ

lastIndex プロパティは個々の正規表現オブジェクトのプロパティで、次のマッチの始まりの位置を示す、読み書き可能な整数値のプロパティです。

lastIndex プロパティの値は、文字列の先頭位置の 0 を基にしています。この値は、検索が成功するたびに変更されます。

lastIndex プロパティは、RegExp オブジェクトの exec メソッドと test メソッド、および String オブジェクトの match メソッド、replace メソッド、および split メソッドによって変更されます。

このプロパティは、正規表現が、グローバルサーチを示す"g" を使用した場合にのみ、セットされ、以下のルールが適用されます。

  • lastIndex が文字列の長さよりも大きければ、regexp.test 及び regexp.exec は失敗し、lastIndex は 0 にセットされます。
  • lastIndex が文字列の長さと等しく、かつ、正規表現が空文字列にマッチする場合には、正規表現は lastIndex の始まりの入力にマッチします。
  • lastIndex が文字列の長さと等しく、かつ、正規表現が空文字列にマッチしない場合、正規表現は入力にマッチせず、lastIndex は 0 にリセットされます。
  • それ以外の場合は、 lastIndex はごく最近のマッチに続く次の位置にセットされます。

以下は「実行」というボタンをクリックすると exec() メソッドを1回ずつ行い、その時の lastIndex を表示するサンプルです。「リセット」ボタンをクリックすると、lastIndex を0にセットします。

var patternX = /Java(Script)?/gi;

var textX = "Is Java more fun than JavaScript? java.com is for Java. I like JAVA coffee.";

var result = patternX.exec(textX);

実行結果

最後にマッチした文字 (result[0]) :

括弧で囲まれた部分文字列のマッチ (result[1]) :

文字列のマッチ位置 (result.index) :

次のマッチが始まる位置 (pattern.lastIndex) :

var patternX = /Java(Script)?/gi;
var textX = "Is Java more fun than JavaScript? java.com is for Java. I like JAVA coffee.";
var result;
var result_0 ="";
var result_1 ="";
var result_index ="";
var pattern_lastIndex ="";
$("button.exec").click(function() {
  result = patternX.exec(textX);
  $("span").text("");
  $("span.result_0").text(result[0]);
  $("span.result_1").text(result[1]);
  $("span.result_index").text(result.index);
  $("span.pattern_lastIndex").text(patternX.lastIndex);	
});

$("button.reset").click(function() {
  patternX.lastIndex = 0;
  $("span").text("");
  $("span.pattern_lastIndex").text(patternX.lastIndex);	
});

以下は、table 要素の中の特定の td 要素を取り出して、table 要素を dl 要素で書き換える例です。

<div id="jqs-19" class="jqs_div">
<div id="exec_sample">
    <table id="schedule">
      <tr>
        <th>DATE</th>
        <th>VENUE &amp; LOCATION</th>
        <th>REMARK</th>
      </tr>
      <tr>
        <td class="date">3/26 (Wed.) </td>
        <td class="info"> 8-11pm <br>
          <span class="venue">The 76 House</span> <br>
          (110 Main St. Tappan, NY) </td>
        <td class="remark">No music charge<br>
          (845) 359-5476</td>
      </tr>
      <tr>
        <td class="date">4/5 (Sat.) </td>
        <td class="info"> 8-12 midnight <br>
          <span class="venue">Cleopatra's Needle</span> <br>
          (93 St. at Broadway)</td>
        <td class="remark">No music charge<br>
          (212) 769-6969 </td>
      </tr>
      <tr>
        <td class="date">4/6 (Sun.) </td>
        <td class="info"> 2-6pm <br>
          <span class="venue">BEA</span> <br>
          (404 W 43St. at 9th Ave.)</td>
        <td class="remark"> No music charge</td>
      </tr>
    </table>
</div>
<button>実行</button>
</div>

table 要素の HTML を変数(table_html)に格納します。

pat_date は class 属性が date の td 要素にマッチさせるパターンです。

pat_info は class 属性が info の td 要素にマッチさせるパターンです。こちらのパターンは、HTML での記述が複数行になっているので複数行の文字列にマッチする [\s\S]* を使っています。また、最短のマッチにさせるため、[\s\S]*? として最後に ? を付けています。

$("#jqs-19 button").click(function() {
  var table_html = $("table#schedule").html();
  var pat_date = /<td class="date">(.+)<\/td>/g;
  var pat_info = /<td class="info">([\s\S]*?)<\/td>/g;
  var result_date, result_info;  //exec()の結果を格納する変数
  var date = [];  //部分マッチ(result_date[1])を格納する配列
  var info = [];  //部分マッチ(result_info[1])を格納する配列
  while((result_date = pat_date.exec(table_html)) != null){
    date.push(result_date[1]);  //部分マッチを配列に追加
  }
  while((result_info = pat_info.exec(table_html)) != null){
    info.push(result_info[1]);  //部分マッチを配列に追加
  }
  var new_html = "";
  for(var i = 0; i < date.length; i++){  //部分マッチ文字列から dl 要素を作成
    new_html += '<dl>\n<dt>' + date[i] + "</dt>\n" + '<dd>' + info[i] + "</dd>\n" + '</dl>\n';
  }
  $("#exec_sample").html(new_html);  //table を dl で書き換え
});
DATE VENUE & LOCATION REMARK
3/26 (Wed.) 8-11pm
The 76 House
(110 Main St. Tappan, NY)
No music charge
(845) 359-5476
4/5 (Sat.) 8-12 midnight
Cleopatra's Needle
(93 St. at Broadway)
No music charge
(212) 769-6969
4/6 (Sun.) 2-6pm
BEA
(404 W 43St. at 9th Ave.)
No music charge

test() メソッド

test()メソッドは、引数に指定されて文字列がパターンに指定された正規表現とマッチすれば、true を返し、マッチしなければ false を返します。

書式

regexp.test('str');

パラメータと戻り値

regexp
検索に使用する正規表現のパターンと適用できるフラグを格納した Regular Expression オブジェクトのインスタンスです。(正規表現リテラル、または変数)
str
検索対象とする String オブジェクトの名前またはリテラル文字列を指定します。
戻り値
一致する文字列が見つかった場合は、true を返します。パターンに一致する文字列が見つからなかった場合は、false を返します。
var pattern = /java/i;
pattern.test("JavaScript");	//trueが返る。

以下は、test() メソッドを使って、p 要素のテキストに Test(大文字・小文字を無視)という文字列があれば、bg_y というクラスを追加して、背景色を変更するサンプルです。

.bg_y {
  background-color: yellow;
}
<div id="jqs-20">
  <p>Test is not fun.</p>
  <p>Java is fun.</p>
  <p>Sample text for test.</p>
  <p>I like music.</p>
  <button>実行</button>
</div>
$("#jqs-20 button").click(function() {
  var test_pattern = /test/i;
  $("#jqs-20 p").each(function() {
    if(test_pattern.test($(this).text())) {
      $(this).addClass('bg_y');
    }
  });
});

Test is not fun.

Java is fun.

Sample text for test.

I like music.

RegExp インスタンスプロパティ

RegExp オブジェクトには以下の5つのプロパティがあります。

  • source プロパティ:正規表現の本体である文字列を格納(読み出し専用)
  • global プロパティ:g フラグが設定されているかの論理値(読み出し専用)
  • ignoreCase プロパティ:i フラグが設定されているかの論理値(読み出し専用)
  • multiline プロパティ:m フラグが設定されているかの論理値(読み出し専用)
  • lastIndex プロパティ:次に検索を開始する文字位置を示す整数を格納(読み書き可能)。グローバル指定の場合に有効。
$("#jqs-21 button").click(function() {	
  var pattern = /java/gi;
  var result = pattern.test("JavaScript is not java");	
  $("#jqs-21 span.source").text(pattern.source);
  $("#jqs-21 span.global").text(pattern.global);
  $("#jqs-21 span.ignoreCase").text(pattern.ignoreCase);
  $("#jqs-21 span.multiline").text(pattern.multiline);
  $("#jqs-21 span.lastIndex").text(pattern.lastIndex);
});

var pattern = /java/gi;

pattern.test("JavaScript is not java");

source:

global:

ignoreCase:

multiline:

lastIndex: