Index

HOME > プログラムTOP > JavaScript



文字列のチェック

 JavaScript の実用的なTips集です。ここでは、主に正規表現(Regular Expression : RegExp オブジェクト)を利用して、文字列の種類(数字、アルファベット、全角/半角など)を確認したり、検索・置換を行う手法を扱います。(IE4以上/NN4以上)
[INDEX]
正規表現を書く: 正規表現とは/量の指定/範囲の指定/位置の指定/条件の指定
文字列の確認: マッチング/数字の確認/アルファベットの確認/ひらがなの確認/メールアドレスの確認
検索と置換: 検索 / 置換

sasaraan programming

Exposition

■正規表現を書く

●正規表現とは
 正規表現とは、文字列をパターンとして表現する手法です。JavaScriptでは、単純に変数として記述する方法と、明示的にオブジェクトとして生成させる方法があります。
var regex = / pattern / cond ; : pattern...パターン, cond...条件
var regex = new RegExp("pattern", "cond"); : pattern...パターン, cond...条件
 "/ ... /" は、文字列のマッチングを表す演算子です。また、RegExp オブジェクトを生成することでも同様の表現をすることができます。この時は、マッチングに使う文字列を通常と同様に、 " " で挟んで記述します。
 指定するパターンについては、検出したい文字列と指定子との組み合わせから成ります。また、条件は省略可能です。条件を指定しなければ、大文字と小文字は区別され、一回の検出しか行われません。

●量の指定
 以下の指定子を使って文字列の長さに対するパターンを指定することができます。RegExp オブジェクトを使う時は、/ / の代わりに " " で挟んで記述します。
 なお、これらの記号を文字として扱う時は、指定子と区別するために \ を頭に付けて \*, \., \/, \+, \?, \{, \} のように記述します。以下で使われる、[ ], $ なども同様です。
/a/   : "a"のみにマッチ
/a*/   : "a"が0回以上マッチ
/a./   : "a"と任意の一文字にマッチ
/a+/   : "a"が1回以上マッチ
/a?/   : "a"が0または1回マッチ
/a{3}/   : "a"が3回マッチ
/a{3,}/  : "a"が3回以上マッチ
/a{3,5}/ : "a"が3回以上5回以下マッチ

●範囲の指定
 [ ] で囲って複数の文字を指定することができます。また、"-"を使うことで連続する文字コードの範囲を指定することもできます。さらに、"^"を使うと否定を表現することができます。RegExp オブジェクトを使う時は、/ / の代わりに " " で挟んで記述します。
/[AZ0]/  : "A", "Z", "0" のいずれかにマッチ
/[0-9]/  : 0 〜 9 までの半角数字のいずれかにマッチ
/[A-Z]/  : A 〜 Z までの半角大文字文字アルファベットのいずれかにマッチ
/[^0-9]/  : 0 〜 9 までの半角数字以外にマッチ
/[a-zA-Z]/ : a 〜 z までと A 〜 Z までのアルファベットのいずれかにマッチ
 略記も用意されています。
  • [0-9] : \d , [^0-9] : \D
  • [a-zA-Z0-9_] : \w , [^a-zA-Z0-9_] : \W
  • [\r\t\n\f] : \s , [^\r\t\n\f] : \S

●位置の指定
 以下の指定子を使ってマッチングの場所を指定することができます。
^   : 文字列の最初 (^a)
$   : 文字列の最後 (a$)
\b  : 単語単位(両側の空白で判断)
\B  : 単語以外(両側の空白で判断)

●条件の指定
 通常のマッチングは、大文字と小文字を区別し、一回分のマッチしか検出しません。以下の記述を付け加えると、これらの条件を制御することができます。 RegExp オブジェクトを使う時は、/ / の代わりに " " で挟んで記述します。
/g   : マッチするすべてのケースを検出する (global)
/i   : 大文字と小文字を区別しない (ignorecase)
/gi  : 大文字小文字を区別せず、マッチする全ケースを検出する
// 記述例
var regex1 = /abc/;        // "abc"にマッチ
var regex2 = /[abc]/;      // "a","b","c"のいずれかにマッチ
var regex3 = /[x-z]/;      // "x - z"の範囲のいずれかにマッチ
var regex4 = /\.{3}/;       // "..."にマッチ(正規表現で使用する記号の場合は\をつけて区別する)
var regex5 = /day\b/;     // 単語"day"にマッチ
var regex6 = /G/gi;        // すべての文字"G","g"にマッチ
var regex7 = new RegExp("day\b");       // regex5 と同じ
var regex8 = new RegExp("G", "gi");     // regex6 と同じ

■文字列の確認

●マッチング
 マッチングを確認するためのメソッドは、String オブジェクトと RegExp オブジェクトにそれぞれ用意されています。
str.match(regex)   : マッチングした文字列を取得します。(ない時は null)
str.search(regex)  : マッチングした先頭位置を取得します。(ない時は -1)
regex.exec(str)   : マッチングした文字列を取得します。(ない時は null)
 (str...文字列, regex...正規表現)
 RegExp オブジェクトでは、対象文字列の取得・設定に input プロパティ、正規表現の取得・設定に source プロパティを使用することもできます。

●数字の確認
 数字の確認には isNaN 関数が利用できます。ただし、小数や負の数などを含めたくない時は、正規表現でパターンを作成します。
isNaN(value) : valueが数値以外ならtrue, 数値ならfalse (NaN : Not a Number の略)
var b1 = isNaN(3.14);               // =false 数字
var b2 = isNaN("x");                // =true 数字以外

function IsNumeric(value) {
    var str = value.toString();             // 文字列に変換
    var regex = /[^0-9]/;                   // 正の整数以外
    if (str.match(regex)) return false;  // 戻り値 false
    return true;                                // 戻り値 true
} 

●半角アルファベットの確認
 半角アルファベットは、正規表現では、/[a-zA-Z]/ のように記述できます。これ以外の文字をチェックするには、/[^a-zA-Z]/ と書くことができます。条件 /i を付加して、/[^a-z]/i としても同様です。
function IsAlpha(value) {
    var regex = /[^a-zA-Z]/;                   // アルファベット以外
    if (value.match(regex)) return false;    // 戻り値 false
    return true;                                     // 戻り値 true
}

●ひらがなの確認
 下記の例では、ひらがな以外の文字をパターンとして指定しています。また、RegExp オブジェクトを生成してから、 compile メソッドを使って、あらかじめコンパイル(機械語に翻訳)をしています。長文でのマッチングや複雑なパターンを使う時などは、コンパイルをしておくと、マッチングの速度が上がります。
regex.compile(pattern) : regex...RegExpオブジェクト, pattern...パターン
function IsHiragana(value) {
    var pat;                                           // ひらがな以外のパターン
    var regex = new RegExp();                 // RegExpオブジェクト
    pat = "[^あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ";
    pat += "まみむめもやゆよらりるれろわゐゑをんがぎぐげござじずぜぞ";
    pat += "だぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょゎ・ー ]";
    regex.compile(pat);                           // コンパイル
    if (value.match(regex)) return false;    // 戻り値 false
    return true;                                     // 戻り値 true
} 

●メールアドレスの確認
 通常、メールアドレスは、"xxx@xxx.xxx"の形となります。これは、正規表現では、/.+@.+\..+/ と記述できますので、これを元にチェックします。
function IsMailAddress(value) {
    var regex = /.+@.+\..+/;                     // メールアドレス
    if (!value.match(regex)) return false;    // 戻り値 false
    return true;                                      // 戻り値 true
}

■検索と置換

●検索
 先頭から末尾への検索には、String オブジェクトの indexOf メソッドを、末尾から先頭への検索には lastIndexOf メソッドを使用します。いずれも、最初に見つかった位置の先頭の文字の添え字を返しますが、見つからない時は -1 を返します。また、オプションとして検索開始位置を指定することもできます。
 なお、位置を表す添え字は、先頭から 0, 1, 2, 3, ... と順番に付けられています。
src.indexOf(word [ , pos ])   (src...対象文字列, word...検索文字列, pos...開始位置)
src.lastIndexOf(word [ , pos ]) (src...対象文字列, word...検索文字列, pos...開始位置)
// 対象文字列
var strSrc = "abcdefghijklmnopqrstuvwxyz0123456789";  

// "pq"を検索する様々なケース
var nIndex1 = strSrc.indexOf("pq");              // =15 (先頭"a"から後ろへ検索)
var nIndex2 = strSrc.lastIndexOf("pq");         // =15 (末尾"9"から先頭へ検索)
var nIndex3 = strSrc.indexOf("pq", 10);         // =15 (添え字10の"k"から後ろへ検索)
var nIndex4 = strSrc.lastIndexOf("pq", 10);    // =-1 (添え字10の"k"から前へ検索)
var nIndex5 = strSrc.indexOf("pq", 20);         // =-1 (添え字20の"u"から後ろへ検索)
var nIndex6 = strSrc.lastIndexOf("pq", 20);    // =15 (添え字20の"u"から前へ検索)	
●置換
 置換は、String オブジェクトの replace メソッドを使用します。このメソッドは、置換後の文字列(対象文字列のコピー)を返します。ただし、元の対象文字列に変化はありませんので注意してください。
src.replace(regex, word)  (src...対象文字列, regex...正規表現, word...置換文字列)
 また、置換では正規表現を使用することができます。この時、正規表現でオプション(条件指定)をしない限り、置換は一度しか行われません。全置換を行うためには、正規表現に g 指定子を付加してください。
var src = "aaa bbb ccc ddd eee";      // 対象文字列
var regex = /c/;                             // 正規表現(検索パターン・'c')
var regex_g = /c/g;                         // 正規表現(検索パターン・'c'・全ケース対象)
var regex_sp = / /g;                        // 正規表現(検索パターン・空白・全ケース対象)
var word = "x";                               // 置換文字列

var str1 = src.replace(regex, word);   // ="aaa bbb xcc ddd eee"(最初のcをxに置換)
var str2 = src;                                // ="aaa bbb ccc ddd eee"(変化なし)
var str3 = src.replace(regex_g, word); // ="aaa bbb xxx ddd eee"(すべてのcをxに全置換)
var str4 = src;                                // ="aaa bbb ccc ddd eee"(変化なし)
var str5 = src.replace(regex_sp, "");  // ="aaabbbcccdddeee"(すべての半角スペースを除去)

www.sasaraan.net

(c) morijoh