Web Design Leaves

作成日：2015年11月2日

リテラル文字

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

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

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

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

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

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

以下は 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

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

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

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

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

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

文字クラス

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

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

/[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]/ は空白文字１文字か数字１文字に一致します。

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

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

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

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

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

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

関連：Unicode （Code Point）関連

繰り返し/量指定子

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

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

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

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

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

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

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

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

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

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 は異なる２つの表現ですが、 /Bob|Robert/ とするとそのどちらかにマッチする１つの表現になります。このように組み合わされた部分パターンを「選択（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 だけに一致してしまいます。

丸括弧（グループ化・参照）

グループ化

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

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

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

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

参照

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

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

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

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

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

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

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

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

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

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

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

位置の指定

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

\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 の後に大文字が１文字続き、その後に任意の文字が続く文字列にマッチします。但し、Java の直後に Script という文字列が続く場合はマッチしません。 JavaUser にはマッチしますが、 JavaScript, JavaScriptor, Javacoffee には一致しません。

フラグ

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

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

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

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

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

search() メソッド

search() メソッドは、あるパターンが文字列に含まれているかを知りたい（検索したい）場合などに使用します。

書式

str.search(regexp)

パラメータと戻り値

str

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

regexp

正規表現 (RegExp) オブジェクト。 RegExp オブジェクトではない場合、内部的にコンストラクタ new RegExp() が用いられ、 RegExp オブジェクトに暗黙的に変換されます。

戻り値

regexp にマッチする str の最初のサブストリングの開始位置を返します。マッチングがなければ-1を返します。

成功した場合、その文字列内で正規表現が見つかったインデックスを返します。失敗した場合、-1 を返します。

マッチングを見つけると、search() メソッドは RegExp.leftContext、RegExp.rightContext、RegExp.$1 などの RegExp クラスのプロパティを設定して、そのマッチングについてのより多くの情報を提供します。（注意）これらの RegExp クラスのプロパティは現在は非推奨となっており、使用しないほうが良いでしょう。「非推奨の RegExp プロパティ」を参照ください。

なお、search()メソッドはグローバル検索をサポートしていないので g 属性を指定しても無視されます。

"JavaScript".search(/script/i);  //4が返される

以下は、search() メソッドを使った（実用的ではない）サンプルです。

<div id="jqs-3">
  <p class="target">JavaScript is not Java.</p>
  <p>Result : <span class="result"></span></p>
  <button class="s1"> /script/i</button>
  <button class="s2"> /Java/</button>
  <button class="s3"> /not/</button>
</div>  

$("#jqs-3 button.s1").click(function() {
  var pattern = /script/i;
  var str =  $("#jqs-3 p.target").text();
  var result = str.search(pattern);
  $("#jqs-3 span.result").text(result);
});

<div id="jqs-4">
  <p class="target">JavaScript is not Java.</p>
  <p>Result : <span class="result"></span></p>
  <p>RegExp.leftContext : <span class="lc"></span></p>
  <p>RegExp.rightContext : <span class="rc"></span></p>
  <p>RegExp.$1 : <span class="cg"></span></p>
  <button>Search</button>
</div>

$("#jqs-4 button").click(function() {
  var pattern = /a(.)a/;
  var str =  $("#jqs-4 p.target").text();
  var result = str.search(pattern);
  $("#jqs-4 span.result").text(result);
  $("#jqs-4 span.lc").text(RegExp.leftContext);
  $("#jqs-4 span.rc").text(RegExp.rightContext);
  $("#jqs-4 span.cg").text(RegExp.$1);
});

以下は、マッチが成功したかどうかのメッセージを出力する関数の例です。

function search_result(regex, str) {
  if (str.search(regex) != -1) {
    result = "マッチしました。";
  } else {
    result = "マッチしませんでした。";
  }
  return result;
}

<div id="jqs-5">
  <p class="target">JavaScript is not Java.</p>
  <p>Result : <span class="result"></span></p>
  <button class="s1">/java/</button>
  <button class="s2">/pt\s?is/</button>
</div>

function search_result(regex, str) {
  if (str.search(regex) != -1) {
    result = "マッチしました。";
  } else {
    result = "マッチしませんでした。";
  }
  return result;
}

$("#jqs-5 button.s1").click(function() {
  var regex = /java/;
  var str =  $("#jqs-5 p.target").text();
  var result = search_result(regex, str);
  $("#jqs-5 span.result").text(result);
});

$("#jqs-5 button.s2").click(function() {
  var regex = /pt\s?is/;
  var str =  $("#jqs-5 p.target").text();
  var result = search_result(regex, str);
  $("#jqs-5 span.result").text(result);
});

replace() メソッド

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

書式

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

パラメータと戻り値

str

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

１番目の引数

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

regexp

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

substr

replacement によって置き換えられる文字列を指定します。

２番目の引数

置き換える文字列（または関数）

replacement

置換テキストを表す文字列（置換文字列）。ドル記号（$）はこの置換文字列では特殊な意味を持ちます。（詳細は後述/置換パターンを参照）

function

新しい部分文字列を作成するために実行される関数を指定します。（詳細は後述/引数としての関数の指定を参照）

戻り値

最初またはすべてのマッチングで replacement によって置換された新しい文字列を返します。

• g 属性が指定された場合は一致した文字列全てを置き換えます。
• １番目の引数が正規表現ではない場合、文字列そのものが検索されます。 search() とは異なり、正規表現に変換はされません。
• このメソッドは、それを呼び出した String オブジェクトを変化させません。単純に新しい文字列を返します。

置換パターン

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

以下はそれぞれの 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"));
  });
});

以下は「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"));
});

以下はそれぞれの 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>"));
  });
});  

以下はそれぞれの 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>"));
  });
});

引数としての関数の指定

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

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

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

以下は、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));
  });
});

以下は英字（[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 には１番目の括弧でキャプチャされたサブマッチの文字列（英字）
• p2 には２番目の括弧でキャプチャされたサブマッチの文字列（記号文字）
• p3 には３番目の括弧でキャプチャされたサブマッチの文字列（数字）が与えられます。

この関数では、引数の 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));
  });
});

match() メソッド

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

書式

str.match(regexp)

パラメータと戻り値

str

検索対象とする String オブジェクトの名前またはリテラル文字列を指定します。

regexp

正規表現パターンおよび適用できるフラグを含む、正規表現オブジェクトを指定します。引数に正規表現以外を指定すると、RegExp()コンストラクタに 渡して正規表現に変換した上で比較が行われます。

戻り値

マッチの結果を含む配列を返します。配列の内容は、regexp が g 属性を伴うグローバルな正規表現かどうかによって異なります。何も見つからなければ、match() メソッドは null を返します。また、match() メソッドから返される配列には、他の配列と同じように lenght プロパティがあります。
戻り値に論理否定演算子（!）を使って !str.match(regexp) のようにすると、マッチした場合は false が、マッチしない場合は true が返ります。（2重否定演算子を使うとその逆になります）

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

• match() メソッドは文字列でマッチングを１つ検索します。
• 配列の要素 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="https://www.webdesignleaves.com/wp/" target="_blank">https://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);
  }
});

以下は、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);
});

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

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]);
});

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

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

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

空の文字列（""）が 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
  

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 要素として解釈されてしまうので、「< 」や「 >」 は変換（エスケープ）しておく必要があります。

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

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

• 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 を使って正規表現オブジェクトを生成するようにします。

関連ページ：

• jQuery を使ったサンプル：HTML特殊文字変換
• HTML 特殊文字を変換するツールサンプル

regexp.exec(str);

<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>

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);

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);
});

<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>

$("#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 で書き換え
});

regexp.test('str');

var pattern = /java/i;
pattern.test("JavaScript");	//trueが返る。

.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');
    }
  });
});

$("#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);
});