正規表現
正規表現とは、複数の検索条件を１つの文字列として表現するパターンマッチング機能のことです。検索時のパターンマッチングに利用します。
JavaScript での文字列の検索や置換は RegExp インスタンスまたは String インスタンスのプロパティとメソッドを使用します。
以下は RegExp インスタンスの生成方法です。
const re = /abc/; const re = new RegExp('abc');
簡単な文字列の検索や置換は String インスタンスのメソッドでも行えます。詳しくはString のメソッド
を参照してください。
このページでは以下の項目について解説します。
正規表現の構文
JavaScript での正規表現の構文には、スラッシュ /
で囲んだ正規表現リテラルと RegExp インスタンスを使う方法があります。どちらも RegExp インスタンスが生成されます。
正規表現リテラル
正規表現リテラルを”/”（スラッシュ）で囲んだパターンで作成する方法です。パターンが変化しない場合は向いています。
let _text = "abcdefghijk";
const re = /abc/;
console.log( re.test(_text) );
スラッシュ /
の直後にフラグを指定することができます。フラグについては正規表現のフラグ
を参照してください。
var re = /abc/i;
RegExp インスタンス
もうひとつは RegExp インスタンスを利用する方法です。ユーザーによる入力がある、パターンが変化する場合は RegExp インスタンスを利用します。
let _text = "abcdefghijk";
const re = new RegExp('abc','ig');
console.log( re.test(_text) );
RegExp() コンストラクターの第２引数はフラグです。複数回の検索や大文字、小文字の区別などの検索条件を設定することができます。
詳しくは正規表現のフラグ
を参照してください。
検索開始位置
RegExp インスタンスのメソッドを使用して検索を行うと検索開始位置が移動することに注意する必要があります。
上記の例では検索ごとの検索開始位置と検索対象を取得したものです。同じ "/abc/ig" を検索していますが、２回目は検索位置が後ろに移動しているために見つかりません。
プロパティ（ Property ）
静的プロパティ
以下は静的プロパティです。get ステートメントとともに使用します。
| プロパティ | 概略 |
|---|---|
| get RegExp[@@species] | 派生コンストラクターを作成 |
インスタンスプロパティ
以下はインスタンスプロパティです。
| プロパティ | 概略 |
|---|---|
| .flags | フラグを返す |
| .dotAll | sフラグがあるか／否か。Boolean 型 |
| .global | gフラグがあるか／否か。Boolean 型 |
| .hasIndices | dフラグがあるか／否か。Boolean 型 |
| .ignoreCase | iフラグがあるか／否か。Boolean 型 |
| .multiline | mフラグがあるか／否か。Boolean 型 |
| .source | 検索対象の文字列を返す |
| .sticky | 検索位置が先頭か／否かを返す。Boolean 型 |
| .unicode | uフラグがあるか／否か。Boolean 型 |
| .lastIndex | 次の検索開始位置を番号で返す |
フラグに関しては以下の正規表現のフラグ
を参照してください。
メソッド（ Method ）
インスタンスメソッド
以下はインスタンスメソッドです。
| メソッド | 概略 |
|---|---|
| .exec() | 検索を実行する |
| .test() | 一致するものがあるか／否かを返す。Boolean 型 |
| .toString() | リテラル型の正規表現に変換 |
| [@@match]() | 一致するものを配列で返す |
| [@@matchAll]() | 一致したパターンをすべて配列で返す |
| [@@replace]() | 一致するものを置換する |
| [@@search]() | 一致した位置を返す。検索開始位置から検索を始める |
| [@@split]() | 検索文字列で対象を分割して配列で返す |
String インスタンスのメソッドで正規表現が利用できるものに以下があります。ただし、String.prototype.match( regexp ) のように引数が RegExp インスタンスになることに注意してください。
| メソッド | 概略 |
|---|---|
| .match( regexp ) | 正規表現 regexp を評価 |
| .matchAll( regexp ) | 正規表現 regexp が一致するすべてをイテレーターとして返す |
| .replace( searchValue, replaceValue ) | searchValue を replaceValue に置換。searchValue は文字列または正規表現。文字列なら最初のみ置換 |
| .replaceAll( searchValue, replaceValue ) | searchValue にマッチする文字列をすべて replaceValue に置換。searchValue は文字列または正規表現 |
| .search( regexp ) | 正規表現 regexp で検索 |
| .split( separator [ , limit ] ) | 指定した文字列または正規表現で分割 |
基本的な正規表現一覧
以下は基本的な正規表現です。詳しくは、正規表現を参照してください。
| 正規表現 | 概略 | 例 | |
|---|---|---|---|
| . | 任意の１文字 | a.c | abc afc aあc |
| * | 直前の文字が０回以上繰り返し、最長一致 | ab*c | ac abbbbbbc |
| + | 直前の文字が１回以上繰り返し、最長一致 | ab+c | abc abbbbbbc |
| ? | 直前の文字が０か１回、最長一致 | ab?c | ac abc |
| ^ | 行の先頭から比較 | ^abc | abc |
| $ | 行の末尾から比較 | xyz$ | xyz |
| | | OR条件 | abc|def | abc def |
| ( ) | キャプチャーグループ | a(bc|de) | abc ade |
| [] | []括弧内のいずれかの文字 | [abc] [a-c] | a, b, c |
| [^] | 否定条件 括弧内の文字以外 | [^abc] [^a-c] | a, b, c以外 |
| {n} | 直前の文字数を指定 | a{3} | aaa |
| \ | 直後の文字をエスケープ | ab\+cd | ab+cd |
正規表現のフラグ
例えば以下のような正規表現による検索があったとします。 RegExp() コンストラクターの第２引数が正規表現におけるフラグといいます。
var _text = "abcdefghijk";
var re = new RegExp('abc','ig');
console.log( re.test(_text) );
上記のRegExp() コンストラクターは以下のように書くこともできます。
var re = new RegExp( '/abc/ig' );
スラッシュ/
に囲まれた部分が検索文字列です。スラッシュ/
の直後のig
がフラグといいます。
フラグ一覧
以下はフラグの一覧です。
| フラグ | 概要 |
|---|---|
| i | 大文字小文字を区別しない。A と a は同じ文字とみなす |
| g | 複数個すべての一致を検索。指定がない場合は最初の1つのみ |
| m | 複数行を検索。改行をまたいで検索。 |
| s | 正規表現の.が検索範囲に改行文字 \n も含む。通常 .は |
| u | Unicode をサポート |
| y | スティッキーモードの有効／無効。 lastIndex で検索開始位置を変更できるようになる |
置換関数 replace() の概説
String.prototype.replace()
簡単な文字や文字列の置換は replace() を使います。
var str = "abcdefg" var re_str = str.replace( 'abc', 'ABC' ); console.log( re_str );
結果は、 "aBcdefg" になります。
replace() 関数は最初に見つかった対象の文字列のみを置換します。複数あっても全てを置換しません。
もしも複数個を置換したい場合は以下の正規表現とフラグ q
を使って replace() を実行します。
正規表現を使った replace()
var str = "abcdefg-abc"
var reg = new RegExp('abc');
var re_str = str.replace( reg, 'ABC' );
console.log( re_str );
結果は、 "ABCdefg-abc" になります。
複数個の置換
var str = "abcdefg-abc"
var reg = new RegExp('abc','g');
var re_str = str.replace( reg, 'ABC' );
console.log( re_str );
結果は、 "ABCdefg-ABC" になります。
ページ内検索、サイト内検索
ページ内検索やサイト内検索機能は欲しいところです。
ページ内検索としてはブラウザでCtrl + F
で呼び出せる検索...
があります。この機能はセキュリティー上 JavaScript から呼び出すことができないようです。
そのため、ページ内検索を HTML で作成するには JavaScript で作成する必要があります。
サイト内検索は Google の検索ロボットに検索対象のサイト名と検索キーワードを送信することで実現します。
Example
以下はページ内検索を行う簡単な例です。
このページ内の文字列を検索します。検索する文字列は正規表現
です。検索されたの文字列は yellow 色でハイライトします。
自動でスクロールはしませんのでご自身で検索されたかを確かめてみてください。