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

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • LINEモバイル:ソフトバンク回線に変更してみた (07/13)
  • JavaScript:正規表現のメソッドがややこしい! 違いを学ぶ (07/11)
  • Firefox:ダイアログなしでリンク先を保存する(Alt + クリック) (07/09)
  • ツイッター:「不適切な内容が含まれている」は自分だけで直せる (07/06)
  • Firefox:公式からブロックされた「Stylish」、代替アドオンは? (07/04)
  • 管理人より
    2300万アクセス突破しました。ありがとうございます。

    JavaScript:正規表現のメソッドがややこしい! 違いを学ぶ

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


    こんにちは、さち です。

    先日、JavaScript で
    正規表現」を使った文字列の検索をしていました。

    ただ、JavaScript には正規表現で検索するメソッドが複数あり
    それぞれ、記述形式や動作が微妙に違います。

    地味にややこしい……。
    ということで、備忘録として記事にまとめておきます。




    正規表現で検索をする4つのメソッド

    JavaScript で、正規表現による検索を行うメソッドは
    主に下記の4つがあります。

    • test()
    • exec()
    • search()
    • match()

    正規表現に一致する文字列があるかどうかの判定は
    どのメソッドでもできます。

    しかし、それぞれ
    何の種類のオブジェクトで使えるメソッドなのか
    返り値が何なのか
    という点が異なるので、使い方が覚えにくいのです。

    ちなみに、正規表現を使用できるメソッドとして
    他にも replace(), split() がありますが
    こちらは、置き換え,分割という役目がハッキリしているものなので
    今回の件からは外します。




    各メソッドの「記述形式」と「返り値」

    まとめた表がこちらです。
    表

    まず、最初に
    test()exec() は正規表現(オブジェクト)のメソッド
    search()match() は文字列(オブジェクト)のメソッド
    という違い。

    この違いによって、先頭の書きはじめが
    「正規表現」からなのか
    「文字列」からなのかという点に影響してきます。

    さらに、それぞれのメソッドで「返り値」が違います。

    特定の文字列が存在するかどうかを確認するだけであれば
    返り値が true/false である test() が一番単純で簡単です。

    ちなみに、それぞれのメソッドで同じ正規表現,文字列で検索をすると
    下記のようになります。
    var str = 'love live!';
    var regexp = /[a-z]+!/;

    var res_test = regexp.test( str );
    var res_exec = regexp.exec( str );
    var res_search = str.search( regexp );
    var res_match = str.match( regexp );

    console.log( res_test );
    // true
    console.log( res_exec );
    // [0]: "live!", index: 5, input: "love live!", length: 1
    console.log( res_search );
    // 5
    console.log( res_match );
    // [0]: "live!", index: 5, input: "love live!", length: 1

    exec()match() は同じ動作をします。

    配列には、一致した文字列が入ります(例では、[0]"live!")。

    配列(オブジェクト)のプロパティについて見てみると
    index には、一致箇所の位置(先頭を0として何文字目か)が入ります。
    これは、search() の結果と同じものです。
    また、input には、検索対象となった元の文字列全体が入ります。

    ただし、フラグ(オプション)で「グローバルサーチ(g)」を設定する場合は
    exec()match() で動作が異なります。
    var str = 'snow halation';
    var regexp = /[a-z]+/g;

    var res_exec = regexp.exec( str );
    var res_match = str.match( regexp );

    console.log( res_exec );
    // [0]: "snow", index: 0, input: "snow halation", length: 1
    console.log( res_match );
    // [0]: "snow", [1]: "halation", length: 2;

    match() の方は、続きから再度一致箇所を探しますが
    exec() の方はしません(while と組み合わせれば可能)。
    そのため、返り値である配列の内容が異なります。
    「グローバルサーチ(g)」を使う時は、注意しましょう。









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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2018 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ