• Home
• Web制作資料
• JavaScript

• Top
• HTML
• CSS
• JavaScript
• PHP
• Plugins
• WordPress

作成日：2015年11月2日

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

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

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

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

var pattern = /a$/;

リテラル文字

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

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

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

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

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

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

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

<div id="jqs-2">  <pre>  This is a sample text.  abcdef      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.abcdefghi

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

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

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

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

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

文字クラス

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

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

/[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(?=\:)/ とします。このパターンは #"50">i大文字と小文字を区別しない。（ignoreCase の i）gグローバル検索。最初に一致したものだけではなく一致するもの全てを検索します。mマルチラインモードにする。^は文字列の先頭と行の先頭に、$は文字列の末尾と行の末尾に 一致するようになります。uECMAScript 2015（ES6）で導入された u フラグ(unicode オプション)は Unicode サポートを有効にします。Unicode のサロゲートペアを使った4バイト文字も1文字として扱うことで、サロゲートペアの正しい処理を可能にします。詳細：Unicode （Code Point）関連

str.search(regexp)

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

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

JavaScript is not Java.

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

JavaScript is not Java.

Result（戻り値） :

RegExp.leftContext（非推奨プロパティ） :

RegExp.rightContext（非推奨プロパティ） :

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

JavaScript is not Java.

Result :

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

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

$("#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.

<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

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

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

$("#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.

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

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

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

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

str.match(regexp)

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

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

https://www.webdesignleaves.com/wp/

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

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

$("#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 ?

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

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

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

str.split(separator, limit)

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

john_smith@example.com

result[0]:

result[1]:

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

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

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:

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

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

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

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

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

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] + '/g';  converted = converted.replace(target, escapes[i]);}

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 フラグの有無に関わらず同じ配列を実行結果として返すということです。

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

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

以下は、ｇフラグのついた正規表現（/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 ="";  //配列の要素0var 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);});

以下は、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 で書き換え});

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

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

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

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