正規表現の使い方/JavaScript

指定した文字列を簡単に検索したり、置換したり出来ると便利です。

本項では、正規表現について説明します。

正規表現の概要

 変数xにabcという文字があるか調べたいとします。このような時は正規表現を使うと便利です。

正規表現の概要

 正規表現は、どのような操作を行うのかを指定して使います。この操作をメソッドと呼びます。

 特殊文字を使って途中にbが繰り返しあっても一致とする、大文字と小文字を区別せずに検索すると言った事も出来ます。

正規表現の使い方

 変数xにabcの文字が含まれているか検索する時は、以下のように記述します。

【正規表現の利用方法】
<script>
var x = "abcd";
document.write(/abc/.test(x));
</script>

 赤字部分が正規表現を使っている部分です。abcが検索する文字列、testが検索を示すメソッドです。testは文字列が存在すればtrue、存在しなければfalseを返すため、上記はtrueと表示されます。

 変数xを使わずにdocument.write(/abc/.test("abcd"));と記述しても同じです。このように、testは正規表現.メソッド("文字列")の形式で記述されます。

 メソッドによっては、"文字列".メソッド(正規表現)の形式で記述されるものもあります。

メソッド

 以下にメソッドの例を挙げます。testとexecは正規表現.メソッド("文字列")の形式、それ以外は"文字列".メソッド(正規表現)の形式で記述されます。

【メソッドの例】
メソッド 説明
test 文字列が含まれていればtrue、含まれていなければfalseを返します。
exec 文字列が含まれていれば文字列、含まれていなければnullを返します。
search 文字列が左から何番目に含まれているかを返します。一番左を0とします。含まれていなければ-1を返します。
match 文字列が含まれていれば文字列、含まれていなければnullを返します。
replace 検索した文字列を置換します。検索文字列が含まれていなければ置換しません。
split 検索した文字列を区切りとして使います。検索文字列が含まれていなければ区切りません。

 以下に記述例、document.writeで表示した時の結果を示します。

・test
 記述例:/ab/.test(x)
 xが"abcd"の時はtrue、xが"efgh"の時はfalseと表示されます。
・exec
 記述例:/ab/.exec(x)
 xが"abcd"の時はab、xが"efgh"の時はnullと表示されます。
・search
 記述例:x.search(/ab/)
 xが"abcd"の時は0、xが"efabcd"の時は2、xが"efgh"の時は-1と表示されます。
・match
 記述例:x.match(/ab/)
 xが"abcd"の時はab、xが"efgh"の時はnullと表示されます。
・relpace
 記述例:x.replace(/ab/,"12")
 xが"abcd"の時は先頭のabを12に置換して12cdと表示し、xが"efgh"の時はefghのまま表示されます。
・split
 記述例:x.split(/-/)
 xが"ab-cd-ef"の時はab,cd,efと表示されます。結果は配列のためカンマ(,)がついています。x.split(/-/)[0]と記述すると、配列1番目のabが表示されます。x.split(/-/)[1]であればcdです。var y = x.split(/-/);等で代入し、y[0]で使うのと同じです。又、x.split(/-/,2)と記述すると、配列2番目ab,cdまでが表示されます。

特殊文字

 正規表現は、特殊文字を使う事が多くあります。特殊文字を使うと、bが何個か連続すると一致とする(マッチする)と言った曖昧なパターン、abの後にcdがある時だけマッチすると言った条件付きパターン等で検索する事が出来ます。以下は特殊文字の例です。

【文字の種類を検索対象にする】

 文字の種類で検索する時に使う特殊文字です。

【文字の種類を表す特殊文字の例】
特殊文字 説明
. どの一文字にもマッチします。
\s スペース、タブ等の空白にマッチします。
\S 空白以外にマッチします。
\d 数字にマッチします。
\D 数字以外にマッチします。
\w 英数字と「_」にマッチします。
\W 英数字と「_」以外にマッチします。
\n 改行にマッチします。
\ \の後に続く文字を特殊文字扱いしません。
・使い方の補足
 「.」であれば、/a./.test("abc")のように利用します。この例では、検索対象"abc"には、aの次に文字が存在するためtrueが返されます。
・\nの補足
 テキストエリアに入力された文字に改行が入っているか判定する時等に使えます。例えば、/ab\ncd/.test(document.form.textarea.value)では、テキストエリアに「ab」と入力し、改行後に「cd」と入力しているとtrueが返されます。改行がなくて「abcd」と入力したのでは、falseになります。
・\の補足
 /a\./.test("ab")のように利用します。「.」はどの一文字にもマッチしますが、直前に\を付ける事で特殊文字として扱わなくなります。従って、この例では"ab"とマッチせずにfalseが返されます。検索対象が"a."の場合はtrueが返されます。

【文字の数を検索対象にする】

 検索する時に文字の数が関係する特殊文字です。

【文字の数が関係する特殊文字の例】
特殊文字 説明
* 直前の文字が0回以上あればマッチします。
+ 直前の文字が1回以上あればマッチします。
? 直前の文字が0回か1回であればマッチします。
{n} 直前の文字がn回繰り返しあればマッチします。
{n,m} 直前の文字がn〜m回の間であればマッチします。
・使い方の補足
 「*」であれば、/ab*/.test("abc")のように利用します。この例では、検索対象"abc"には、aの後にbがあるためtrueが返されます。bが0回以上のため、/ab*/.test("ac")でもtrueです。/ab*/.test("bc")では、検索対象"bc"にaが含まれていないため、falseになります。
・{n}や{n,m}の補足
 {n,m}であれば、/ab{1,3}c/.test("abbc")のように利用します。この例では、検索対象"abbc"には、aの後にbが2回繰り返されており、1〜3回内に当たるためtrueになります。/ab{1,3}c/.test("abbbbc")ではbが4回繰り返されているため、falseになります。

【グループを検索対象にする】

 複数文字をグループ化して判定する時に利用する特殊文字です。

【グループを表す特殊文字の例】
特殊文字 説明
[xyz] xyz部分に記述した文字のどれかにマッチします。a-c等ハイフンを使うと、aからcのどの文字ともマッチします。
[^xyz] xyz部分に記述した文字でない場合にマッチします。a-c等ハイフンを使うと、aからc以外の文字にマッチします。
(?:x) x部分に記述した文字列を一塊とし、特殊文字の対象とします。
(x) x部分に記述した文字列を一塊とし、特殊文字の対象とします。マッチした文字列は$1等で取り出せます。
・[xyz]の補足
 /[1-9]/.test("1ab9")では、[1-9]が1〜9の全てを表すため、検索対象"1ab9"の最初の1にマッチしてtrueになります。[a-z]では英小文字、[A-Z]では英大文字とマッチさせる事が出来ます。
・[^xyz]の補足
 ^はxyzを否定するため、[^1-9]では数字以外、[^a-z]では英小文字以外、[^A-Z]では英大文字以外でマッチします。
・(?:x)の補足
 /(?:ab){2}/.test("abab")は、()内のabを一塊として{2}の対象です。検索対象"abab"はabが2回含まれるため、trueが返されます。()で括らず/ab{2}/.test("abab")とすると、{2}の対象はbだけになります。これは、検索対象"abab"でbが2文字続かないため、falseになります。
・(x)の補足
 /(ab)(cd)\1\2/.test("abcdabcd")では、それぞれの色に該当した部分がマッチします。()内の文字列であるabを\1、cdを\2として覚えているためです。つまり、trueが返されます。又、"abcd".replace(/(ab)(cd)/,'$2$1')では文字列"cdab"が返されます。$1に"ab"、$2に"cd"を覚えており、$2$1に置換されて"cdab"となるためです。

【条件付きで検索する】

 検索する時に条件がある特殊文字です。

【条件がある特殊文字の例】
特殊文字 説明
x(?=y) xの後がyの時にxがマッチします。
x(?!y) xの後がyでない時にxがマッチします。
x|y x、又はyの時であればマッチします。
・x(?=y)の補足
 /ab(?=cd)/.exec("abcd")では、検索対象"abcd"がabの後にcdが続くため、abが返されます。/ab(?=cd)/.exec("abef")ではcdが続いていないため、nullが返されます。又、abが出現しない/ab(?=cd)/.exec("agcd")でもnullが返されます。
・x(?!y)の補足
 /ab(?!cd)/.exec("abef")では、検索対象"abef"がabの後にcdが続いていないため、abが返されます。/ab(?!cd)/.exec("adcd")ではcdが続いているため、nullが返されます。又、abが出現しない/ab(?!cd)/.exec("agef")でもnullが返されます。
・x|yの補足
 /ab|AB/.exec("abcd")では、検索対象"abcd"にabが存在するため、abが返されます。/ab|AB/.exec("ABCD")ではABが返されます。

【文字位置を対象にして検索する】

 検索する時に位置が関係する特殊文字です。

【位置が関係する特殊文字の例】
特殊文字 説明
^ 続く文字が先頭文字の時にマッチします。
$ 直前の文字が最後の時にマッチします。
\b 文字間にマッチします。
\B 文字間以外にマッチします。
・^の補足
 /^a/.test("abc")では、検索対象"abc"の先頭がaのため、trueが返されます。/^a/.test("bac")はfalseになります。
・$の補足
 /c$/.test("abc")では、検索対象"abc"の最後がcのため、trueが返されます。/c$/.test("acb")はfalseになります。
・\bの補足
 /c\b/.test("abc def")では、検索対象"abc def"でcの後にスペースがあるため、trueが返されます。/\bd/.test("abc def")は、"abc def"でスペースの後にdがあるためtrueが返されます。/d\b/.test("abc def")はfalseになります。
・\Bの補足
 /d\B/.test("abc def")では、検索対象"abc def"でdの後は文字間ではないため、trueが返されます。/c\B/.test("abc def")はfalseになります。

フラグ

 フラグを用いると、検索の条件を指定出来ます。フラグは/ab/フラグ.test("abcd")、若しくは"abcd".match(/ab/フラグ)等、正規表現のパターンに続けて記述します。

 以下はフラグの例です。

【フラグの例】
フラグ 説明
g 1度マッチした後も検索します。
i 大文字と小文字を区別しません。
m 複数行を対象とする時、1行単位に判定します。
・gの補足
 "abab".match(/ab/)では、最初のabだけにマッチするためabが返されますが、"abab".match(/ab/g)では繰り返し検索するため、ab,abが返されます。これは配列になっているため、"abab".match(/ab/g)[0]とすると、最初のabだけ表示されます。又、"abab".replace(/ab/,"12")では、最初のabだけ置換されて12abが返されますが、"abab".replace(/ab/g,"12")では、全てのabが置換されて1212が返されます。
・iの補足
 /ab/.test("ABC")はfalseになりますが、/ab/i.test("ABC")はtrueになります。
・mの補足
 /^c/.test("ab\ncd")では、検索対象の"ab\ncd"は先頭がcではないため、falseになります。/^c/m.test("ab\ncd")とフラグmを付けるとtrueになります。\nが改行を示すため、"ab\ncd"は2行ある事になります。フラグmを付けると全体ではなく、行単位で先頭か判断しますが、2行目の先頭がcのためです。特殊文字で$を使った時も同様で、行単位に最後か判定されます。

利用例

 if文で正規表現を使う時の例として、フォームに入力された文字を判定して処理を行うスクリプトを示します。

【if文での正規表現利用例】
<form action="#" name="form1" onsubmit="return func1();">
<input type="text" size="10" name="text1">
<button type="submit">表示</button>
</form>

<script>
function func1() {
    var x = document.form1.text1.value;
    if ( /[1-9]+/.test(x) ) {
        alert(x);
    }
    else {
        alert("数字を入力して下さい");
    }
    return false;
}
</script>

 赤字部分は、テキスト入力欄に入力された値をxに代入しています。青字部分は、xが数字であればtrue、数字でない場合や1文字も入力されていない場合はfalseを返します。if文に従い、trueの場合はその数字をアラートで表示し、falseの場合はアラートで「数字を入力して下さい」と表示します。

 このように、フォームで入力された文字や数字、HTMLで表示された文字や数字、変数の値等を正規表現を使って判定し、次の処理を行う時に利用出来ます。

JavaScript基本を最初からJavaScriptの使い方

  • このエントリーをはてなブックマークに追加

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)