path: root/files/ja/web/javascript/guide/regular_expressions/index.html

---
title: 正規表現
slug: Web/JavaScript/Guide/Regular_Expressions
tags:
  - Guide
  - Intermediate
  - JavaScript
  - Reference
  - RegExp
  - Regular Expressions
  - regex
translation_of: Web/JavaScript/Guide/Regular_Expressions
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>

<p class="summary">正規表現とは、文字列内で文字の組み合わせを照合するために用いられるパターンです。 JavaScript では、正規表現はオブジェクトでもあります。これらのパターンは {{jsxref("RegExp")}} の {{jsxref("RegExp.exec", "exec()")}} および {{jsxref("RegExp.test", "test()")}} メソッドや、{{jsxref("String")}} の {{jsxref("String.match", "match()")}}、 {{jsxref("String.matchAll()", "matchAll")}}、{{jsxref("String.replace()", "replace")}}、{{jsxref("String.search()", "search")}}、{{jsxref("String.split()", "split")}} メソッドで使用できます。本章では、 JavaScript の正規表現について説明します。</p>

<h2 id="Creating_a_Regular_Expression">正規表現の作成</h2>

<p>正規表現は 2 通りの方法で作成することができます。</p>

<ul>
 <li>
  <p>次のように、スラッシュで囲まれたパターンからなる正規表現リテラルを使用します。</p>

  <pre class="brush: js">let re = /ab+c/;
</pre>

  <p>正規表現リテラルはスクリプトの読み込み時にその正規表現をコンパイルします。正規表現が変化しない場合、この方法を使うとよいパフォーマンスが得られます。</p>
 </li>
 <li>
  <p>また、次のように {{jsxref("RegExp")}} オブジェクトのコンストラクター関数を呼び出す方法があります。</p>

  <pre class="brush: js">let re = new RegExp('ab+c');
</pre>

  <p>コンストラクター関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることが分かっている場合や、パターンが分からない場合、ユーザー入力など別なところからパターンを取得する場合は、コンストラクター関数を使用してください。</p>
 </li>
</ul>

<h2 id="Writing_a_Regular_Expression_Pattern">正規表現パターンの記述</h2>

<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例には記憶装置として用いられる丸括弧があります。パターンのこの丸括弧で囲まれた部分に一致した箇所は、後で使用できるように記憶されます。詳しくは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#using_groups">グループの使用</a>を参照してください。</p>

<div class="notecard note">
<p><strong>注:</strong> すでに正規表現の形式に慣れている方は、<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">早見表</a>を見て特定のパターンや構造を素早く検索することもできます。</p>
</div>

<h3 id="Using_simple_patterns">単純なパターンの使い方</h3>

<p>単純なパターンとは、直接一致するものを探したい文字で構成されたものです。例えば <code>/abc/</code> というパターンは、文字列の中で <code>"abc"</code> という並びが正確に現れる (すべての文字が連続しており、その順で並んでいる) 場合のみ、文字の組み合わせに一致します。 <code>"Hi, do you know your abc's?"</code> や <code>"The latest airplane designs evolved from slabcraft."</code> 等の文字列には一致します。どちらの場合でも、 <code>"abc"</code> という部分文字列に一致します。 <code>"Grab crab"</code> という文字列の場合、 <code>"ab c"</code> という部分文字列を含んでいますが、正確な <code>"abc"</code> という部分文字列を含んでいるわけではないので、一致しません。</p>

<h3 id="Using_Special_Characters">特殊文字の使い方</h3>

<p>直接の一致よりも高度な何かに一致するものを検索する場合、例えば 1 個以上の b を探したり、ホワイトスペースを見つけたりする場合、パターンに特殊文字を含めることができます。例えば、 <em>1 個の <code>"a"</code> に 0 個以上の <code>"b"</code> が続き、さらに <code>"c"</code> が続く</em>ものに一致させる場合、 <code>/ab*c/</code> というパターンを使用するでしょう。 <code>"b"</code> の後の <code>*</code> は「直前のアイテムの 0 回以上の出現」を意味します。 <code>"cbbabbbbcdebc"</code> という文字列では、このパターンは <code>"abbbbc"</code> という部分文字列に一致します。</p>

<p>以下のページで、正規表現で使用できる特殊文字の完全なリストとその意味を詳しく説明します。</p>

<dl>
 <dt><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">言明</a></dt>
 <dd>言明には、 行や単語の始まりや終わりを示す境界や、 (先読み、後読み、条件式を含む) 何らかの方法で一致できることを示す、その他のパターンが含まれます。</dd>
 <dt><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">文字クラス</a></dt>
 <dd>文字や数字の区別など、文字の種類を区別します。</dd>
 <dt><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">グループと範囲</a></dt>
 <dd>式にある文字のグループと範囲を示します。</dd>
 <dt><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">数量詞</a></dt>
 <dd>一致させる文字や式の数を示します。</dd>
 <dt><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode プロパティエスケープ</a></dt>
 <dd>大文字と小文字、数学記号、句読点など、 Unicode 文字のプロパティに基づき区別します。</dd>
</dl>

<p>正規表現で利用可能なすべての特殊文字を一つの表で見たい場合は、以下を参照してください。</p>

<table class="standard-table">
 <caption>正規表現における特殊文字</caption>
 <thead>
  <tr>
   <th scope="col">文字 / 構造</th>
   <th scope="col">対応する記事</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>\</code>, <code>.</code>, <code>\cX</code>, <code>\d</code>, <code>\D</code>, <code>\f</code>, <code>\n</code>, <code>\r</code>, <code>\s</code>, <code>\S</code>, <code>\t</code>, <code>\v</code>, <code>\w</code>, <code>\W</code>, <code>\0</code>, <code>\xhh</code>, <code>\uhhhh</code>, <code>\uhhhhh</code>, <code>[\b]</code></td>
   <td>
    <p><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">文字クラス</a></p>
   </td>
  </tr>
  <tr>
   <td><code>^</code>, <code>$</code>, <code>x(?=y)</code>, <code>x(?!y)</code>, <code>(?&lt;=y)x</code>, <code>(?&lt;!y)x</code>, <code>\b</code>, <code>\B</code></td>
   <td>
    <p><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">言明</a></p>
   </td>
  </tr>
  <tr>
   <td><code>(x)</code>, <code>(?:x)</code>, <code>(?&lt;Name&gt;x)</code>, <code>x|y</code>, <code>[xyz]</code>, <code>[^xyz]</code>, <code>\<em>Number</em></code></td>
   <td>
    <p><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">グループと範囲</a></p>
   </td>
  </tr>
  <tr>
   <td><code>*</code>, <code>+</code>, <code>?</code>, <code>x{<em>n</em>}</code>, <code>x{<em>n</em>,}</code>, <code>x{<em>n</em>,<em>m</em>}</code></td>
   <td>
    <p><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">数量詞</a></p>
   </td>
  </tr>
  <tr>
   <td><code>\p{<em>UnicodeProperty</em>}</code>, <code>\P{<em>UnicodeProperty</em>}</code></td>
   <td><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode プロパティエスケープ</a></td>
  </tr>
 </tbody>
</table>

<div class="notecard note">
<p><strong>注:</strong> <a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">もっと大きな早見表もあります</a> (個別の記事の一部を集約しただけです)。</p>
</div>

<h3 id="Escaping">エスケープ</h3>

<p>特殊文字を文字として使う必要がある場合 (例えば、実際に <code>"*"</code> を検索する場合)、その前にバックスラッシュを付けてエスケープする必要があります。例えば、 <code>"a"</code> に <code>"*"</code> が続き、さらに <code>"b"</code> が続くものを検索するには、 <code>/a\*b/</code> と使用します。バックスラッシュは <code>"*"</code> を「エスケープ」し、特殊文字ではなく文字として扱うようにします。</p>

<p>同様に、もし正規表現リテラルを書いていてスラッシュ ('/') に一致させる必要がある場合は、スラッシュをエスケープする必要があります (そうしないとスラッシュでパターンが終了します)。例えば、 "/example/" という文字列とそれに続く 1 文字以上のアルファベットを探すには、 <code>/\/example\/[a-z]+/i</code> とします。それぞれのスラッシュ前のバックスラッシュが、スラッシュを文字として扱わせます。</p>

<p>バックスラッシュ文字に一致させるには、バックスラッシュをエスケープする必要があります。例えば、 "C:\" という文字列で "C" が任意の英字になる場合は、 <code>/[A-Z]:\\/</code> を使用します。最初のバックスラッシュがその次の文字をエスケープするので、この表現は単一のバックスラッシュを検索します。</p>

<p><code>RegExp</code> コンストラクターに文字列リテラルを渡して使用する場合は、バックスラッシュは文字列リテラルでのエスケープ文字でもあることを思い出してください。つまり、バックスラッシュを正規表現で用いるには文字列リテラルレベルでエスケープする必要があります。 <code>/a\*b/</code> と <code>new RegExp("a\\*b")</code> は同じ表現を生成するものであり、 "a" の次に "*"、その次に "b" があるものを探します。</p>

<p>エスケープ文字がパターンにまだ含まれていない場合は、 {{jsxref('String.replace')}} を使用して追加することができます。</p>

<pre class="brush: js">function escapeRegExp(string) {
  return string.replace(/[.*+?^=!:${}()|[\]\/\\]/g, '\\$&amp;'); // $&amp;はマッチした部分文字列全体を意味します
}</pre>

<p>正規表現の後の "g" はグローバルサーチを行うオプション/フラグで、文字列全体を見て一致したものをすべて返します。下の<a href="#advanced_searching_with_flags">フラグを用いた高度な検索</a>に詳しく説明されています。</p>

<p><em>なぜこれが JavaScript に組み込まれていないのかって？</em> RegExp に追加する提案がありますが、 <a href="https://github.com/benjamingr/RegExp.escape/issues/37">TC39 で拒絶されました</a>。</p>

<h3 id="Using_Parentheses">括弧の使用</h3>

<p>正規表現パターンの一部を括弧で囲むことで、マッチした部分文字列を記憶しておくことができます。いったん記憶されれば、後からその部分文字列を呼び出すことができます。これに関しては<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#using_groups">グループと範囲</a>で説明しています。</p>

<h2 id="Working_with_Regular_Expressions" name="Working_with_Regular_Expressions">JavaScriptでの正規表現の使い方</h2>

<p>正規表現は、<code>RegExp</code> の <code>test()</code> と <code>exec()</code> メソッド、<code>String</code> の <code>match()</code>、<code>replace()</code>、<code>search()</code>、<code>split()</code> メソッドとともに使用します。これらのメソッドの詳細は <a href="/ja/docs/Web/JavaScript/Reference">JavaScript リファレンス</a>で説明しています。</p>

<table class="standard-table">
 <caption>正規表現を使用するメソッド</caption>
 <thead>
  <tr>
   <th scope="col">メソッド</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{jsxref("RegExp.exec", "exec()")}}</td>
   <td>文字列内で一致するものの検索を実行します。結果情報の配列を返します。一致するものがなければ <code>null</code> を返します。</td>
  </tr>
  <tr>
   <td>{{jsxref("RegExp.test", "test()")}}</td>
   <td>文字列内で一致するものがあるか検査します。 <code>true</code> または <code>false</code> を返します。</td>
  </tr>
  <tr>
   <td>{{jsxref("String.match", "match()")}}</td>
   <td>キャプチャグループを含む、すべての一致するものを含む配列を返します。一致するものがない場合は <code>null</code> を返します。</td>
  </tr>
  <tr>
   <td>{{jsxref("String.matchAll", "matchAll()")}}</td>
   <td>キャプチャグループを含む、すべての一致するものを含む反復子を返します。</td>
  </tr>
  <tr>
   <td>{{jsxref("String.search", "search()")}}</td>
   <td>文字列内で一致するものがあるか検査します。一致した位置を返します。検索に失敗した場合は <code>-1</code> を返します。</td>
  </tr>
  <tr>
   <td>{{jsxref("String.replace", "replace()")}}</td>
   <td>文字列内で一致するものを一つ検索し、一致した部分文字列を置換する部分文字列で置換します。</td>
  </tr>
  <tr>
   <td>{{jsxref("String.replaceAll", "replaceAll()")}}</td>
   <td>文字列内で一致するものすべてを一つ検索し、一致した部分文字列を置換する部分文字列で置換します。</td>
  </tr>
  <tr>
   <td>{{jsxref("String.split", "split()")}}</td>
   <td>正規表現または固定文字列を用いて文字列を分割し、部分文字列の配列に入れます。</td>
  </tr>
 </tbody>
</table>

<p>あるパターンが文字列に存在するかを知りたいときは、<code>test()</code> または <code>search()</code> メソッドを使用してください。詳細な情報が知りたいときは (実行時間が長くなりますが) <code>exec()</code> または <code>match()</code> メソッドを使用してください。<code>exec()</code> や <code>match()</code> を使用して一致した場合、これらのメソッドは配列を返し、関連する正規表現オブジェクトと定義済みオブジェクトである <code>RegExp</code> オブジェクトのプロパティを更新します。一致しなかった場合、 <code>exec</code> メソッドは <code>null</code> (<code>false</code> に変換される値) を返します。</p>

<p>次の例では、<code>exec()</code> メソッドを使用して文字列を検索します。</p>

<pre class="brush: js">var myRe = /d(b+)d/g;
var myArray = myRe.exec('cdbbdbsbz');
</pre>

<p>正規表現のプロパティにアクセスする必要がない場合、 <code>myArray</code> を作成するもう一つの方法はこのスクリプトの通りです。</p>

<pre class="brush: js">var myArray = /d(b+)d/g.exec('cdbbdbsbz');
    // "cdbbdbsbz".match(/d(b+)d/g) と同様。ただし、
    // "cdbbdbsbz".match(/d(b+)d/g) は配列 [ "dbbd" ] を出力するのに対し、
    // /d(b+)d/g.exec('cdbbdbsbz') は配列 [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ] を出力する。
</pre>

<p>(異なる動作についての詳しい情報は<a href="#using_the_global_search_flag_with_exec"><code>exec()</code> のグローバル検索フラグの使用</a>を参照してください。)</p>

<p>ある文字列から正規表現を組み立てたい場合は、次のスクリプトのような方法があります。</p>

<pre class="brush: js">var myRe = new RegExp('d(b+)d', 'g');
var myArray = myRe.exec('cdbbdbsbz');
</pre>

<p>これらのスクリプトでは一致したものがあると、配列を返すとともに次表で示されるプロパティを更新します。</p>

<table class="standard-table">
 <caption>正規表現の実行結果</caption>
 <thead>
  <tr>
   <th scope="col">オブジェクト</th>
   <th scope="col">プロパティまたはインデックス</th>
   <th scope="col">説明</th>
   <th scope="col">この例の場合</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td rowspan="4"><code>myArray</code></td>
   <td></td>
   <td>一致した文字列と、すべての記憶された部分文字列です。</td>
   <td><code>['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']</code></td>
  </tr>
  <tr>
   <td><code>index</code></td>
   <td>入力文字列で一致した位置を示す、0 から始まるインデックスです。</td>
   <td><code>1</code></td>
  </tr>
  <tr>
   <td><code>input</code></td>
   <td>元の文字列です。</td>
   <td><code>'cdbbdbsbz'</code></td>
  </tr>
  <tr>
   <td><code>[0]</code></td>
   <td>最後に一致した文字列です。</td>
   <td><code>'dbbd'</code></td>
  </tr>
  <tr>
   <td rowspan="2"><code>myRe</code></td>
   <td><code>lastIndex</code></td>
   <td>次の検索が始まるインデックスです。 (このプロパティは、g オプションを用いる正規表現でのみセットされます。これについては<a href="#advanced_searching_with_flags">フラグを用いた高度な検索</a>で説明します。)</td>
   <td><code>5</code></td>
  </tr>
  <tr>
   <td><code>source</code></td>
   <td>パターンのテキストです。正規表現の実行時ではなく作成時に更新されます。</td>
   <td><code>'d(b+)d'</code></td>
  </tr>
 </tbody>
</table>

<p>この例の 2 つ目の形式で示したように、オブジェクト初期化子で作成した正規表現は、変数に代入せずに使用することができます。しかし、そうすると出現するたびに新しい正規表現になります。このため、変数に代入せずにこの形式を使用すると、その後、その正規表現のプロパティにアクセスできません。例えば、次のようなスクリプトがあるとします。</p>

<pre class="brush: js">var myRe = /d(b+)d/g;
var myArray = myRe.exec('cdbbdbsbz');
console.log('The value of lastIndex is ' + myRe.lastIndex);

// "The value of lastIndex is 5"
</pre>

<p>しかし、このスクリプトの場合は次のようになります。</p>

<pre class="brush: js">var myArray = /d(b+)d/g.exec('cdbbdbsbz');
console.log('The value of lastIndex is ' + /d(b+)d/g.lastIndex);

// "The value of lastIndex is 0"
</pre>

<p>この 2 つの文中の <code>/d(b+)d/g</code> は異なる正規表現オブジェクトであるため、 <code>lastIndex</code> プロパティの値も異なります。オブジェクト初期化子で作成した正規表現のプロパティにアクセスする必要がある場合は、まずその正規表現を変数に代入する必要があります。</p>

<h3 id="advanced_searching_with_flags">フラグを用いた高度な検索</h3>

<p>正規表現には、グローバル検索や大文字小文字を区別しない検索などの機能を実現する 6 種類のオプションフラグがあります。これらのフラグは、個別に使用することも一緒に使用することもでき、順序は問いません。正規表現の一部に含まれます。</p>

<table class="standard-table">
 <caption>正規表現フラグ</caption>
 <thead>
  <tr>
   <th scope="col">フラグ</th>
   <th scope="col">説明</th>
   <th scope="col">対応するプロパティ</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>d</code></td>
   <td>一致した部分文字列の位置を生成します。</td>
   <td><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices">RegExp.prototype.hasIndices</a></code></td>
  </tr>
  <tr>
   <td><code>g</code></td>
   <td>グローバル検索を行います。</td>
   <td><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global">RegExp.prototype.global</a></code></td>
  </tr>
  <tr>
   <td><code>i</code></td>
   <td>大文字・小文字を区別しない検索です。</td>
   <td><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase">RegExp.prototype.ignoreCase</a></code></td>
  </tr>
  <tr>
   <td><code>m</code></td>
   <td>複数行の検索です。</td>
   <td><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline">RegExp.prototype.multiline</a></code></td>
  </tr>
  <tr>
   <td><code>s</code></td>
   <td><code>.</code> を改行文字と一致するようにします。</td>
   <td><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll">RegExp.prototype.dotAll</a></code></td>
  </tr>
  <tr>
   <td><code>u</code></td>
   <td>"unicode" です。パターンを一連の Unicode コードポイントとして扱います。</td>
   <td><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode">RegExp.prototype.unicode</a></code></td>
  </tr>
  <tr>
   <td><code>y</code></td>
   <td>対象文字列の現在の位置から始まる部分に一致するものを探す「先頭固定」 (sticky) 検索を行います。 {{jsxref("RegExp.sticky", "sticky")}} のページを参照してください。</td>
   <td><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">RegExp.prototype.sticky</a></code></td>
  </tr>
 </tbody>
</table>

<p>フラグを正規表現に含めるには、次のようにしてください。</p>

<pre class="brush: js">var re = /pattern/flags;
</pre>

<p>または</p>

<pre class="brush: js">var re = new RegExp('pattern', 'flags');
</pre>

<p>フラグは正規表現を作る際になくてはならないものであることに注意してください。後から加えたり取り除いたりすることはできません。</p>

<p>例えば <code>re = /\w+\s/g</code> は、1 個以上の文字とそれに続くスペースを探す正規表現を作成します。また、正規表現は文字列全体を通してこの組み合わせを探します。</p>

<pre class="brush: js">var re = /\w+\s/g;
var str = 'fee fi fo fum';
var myArray = str.match(re);
console.log(myArray);

// ["fee ", "fi ", "fo "]
</pre>

<p>この例ではこの行、</p>

<pre class="brush: js">var re = /\w+\s/g;
</pre>

<p>をこの行、</p>

<pre class="brush: js">var re = new RegExp('\\w+\\s', 'g');
</pre>

<p>に置き換えることができます。得られる結果は同じです。</p>

<p><code>m</code> フラグは、複数行の入力文字列を複数行として扱うことを指定するために使用します。 <code>m</code> フラグを使用すると、 <code>^</code> と <code>$</code> は、文字列全体ではなく、入力文字列内の任意の行の先頭または末尾に一致します。</p>

<h4 id="using_the_global_search_flag_with_exec">exec() におけるグローバル検索の使用</h4>

<p><code>.exec()</code> メソッドが使われた時には <code>g</code> フラグに関連する動作が異なります。。 "class" と "argument" の役割が反対になります。 <code>.match()</code> の場合、文字クラス(やデータ型) がメソッドを持ち、正規表現は単なる引数で、 <code>.exec()</code> の場合、正規表現がメソッドを持ち、文字列は引数になります。この <em><code>str.match(re)</code></em> と <em><code>re.exec(str)</code></em> を比較してみましょう。 <code>g</code> フラグが <strong><code>.exec()</code></strong> メソッドで使用されると、反復的な進行を行うことができます。</p>

<pre class="brush: js">var xArray; while(xArray = re.exec(str)) console.log(xArray);
// produces:
// ["fee ", index: 0, input: "fee fi fo fum"]
// ["fi ", index: 4, input: "fee fi fo fum"]
// ["fo ", index: 7, input: "fee fi fo fum"]</pre>

<h2 id="Examples">例</h2>

<div class="notecard note">
<p><strong>注:</strong> 複数の例が次の場所にあります。</p>

<ul>
 <li>{{jsxref("RegExp.exec", "exec()")}}、{{jsxref("RegExp.test", "test()")}}、{{jsxref("String.match", "match()")}}、{{jsxref("String.matchAll", "matchAll()")}}、{{jsxref("String.search", "search()")}}、{{jsxref("String.replace", "replace()")}}、{{jsxref("String.split", "split()")}} のリファレンスページ</li>
 <li>ガイド記事の<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">文字クラス</a>、<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">言明</a>、<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">グループと範囲</a>、<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">数量詞</a>、<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode プロパティエスケープ</a></li>
</ul>
</div>

<h3 id="Using_special_characters_to_verify_input">特殊文字を用いた入力の確認</h3>

<p>次の例では、ユーザーが電話番号を入力することを想定しています。ユーザーが [チェック] ボタンを押すと、スクリプトはその番号の有効性をチェックします。番号が有効な場合 (正規表現で指定された文字列に一致した場合)、スクリプトはユーザーへの感謝と番号の確認を示すメッセージを表示します。番号が無効な場合、スクリプトはユーザーに電話番号が無効であることを通知します。</p>

<p>この正規表現は次のものを探します。</p>

<ol>
 <li>3 桁の数字 <code>\d{3}</code> または <code>|</code> 左括弧 <code>\(</code> の次に 3 桁の数字 <code>\d{3}</code> の次に閉じ括弧 <code>\)</code> で、これはキャプチャグループでないもの <code>(?:)</code> に入っています。</li>
 <li>続いてダッシュ 1 つ、スラッシュ、小数点のうちの何れかがキャプチャグループ <code>()</code> に入っているもの</li>
 <li>続いて 3 桁の数字 <code>\d{3}</code></li>
 <li>続いて (最初の) キャプチャグループ内で記憶されているものに一致するもの <code>\1</code></li>
 <li>続いて 4 桁の数字 <code>\d{4}</code></li>
</ol>

<p>ユーザーが <kbd>Enter</kbd> ボタンを押した際に起動する <code>click</code> イベントにより <code>phoneInput.value</code> の値が設定されます。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;
  電話番号（市外局番含む）を入力して "チェック" をクリックしてください。
  &lt;br&gt;
  適切な形式は ###-###-#### などです。
&lt;/p&gt;
&lt;form action="#"&gt;
  &lt;input id="phone"&gt;
    &lt;button onclick="testInfo(document.getElementById('phone'));"&gt;チェック&lt;/button&gt;
&lt;/form&gt;</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
function testInfo(phoneInput) {
  var OK = re.exec(phoneInput.value);
  if (!OK) {
    console.error(phoneInput.value + ' は市外局番付き電話番号ではありません！');
  } else {
    console.log('ありがとう、あなたの電話番号は ' + OK[0]);
  }
} </pre>

<h4 id="Result">結果</h4>

<p>{{ EmbedLiveSample('Using_special_characters_to_verify_input', '', '', '', 'Web/JavaScript/Guide/Regular_Expressions') }}</p>

<h2 id="Tools">ツール</h2>

<dl>
 <dt><a href="https://regexr.com/" rel="noopener">RegExr</a></dt>
 <dd>An online tool to learn, build, &amp; test Regular Expressions.</dd>
 <dt><a href="https://regex101.com/" rel="noopener">Regex tester</a></dt>
 <dd>An online regex builder/debugger</dd>
 <dt><a href="https://extendsclass.com/regex-tester.html" rel="noopener">Regex visualizer</a></dt>
 <dd>An online visual regex tester.</dd>
</dl>

<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>