MENU

JavaScript正規表現

【JavaScript】 正規表現リテラルと文字リテラルで\の取り扱いの差

更新日:2021/07/19

 

 

JavaScriptは、正規表現リテラルと文字列リテラルの二つの方法で正規表現をおこなうことができます。
パターン文字を検索したいとき\でエスケープする必要がありますが、正規表現リテラルと文字列リテラルでは記述方法が異なります。

 

 


こちらの自作ツールもよろしくお願いします。

 

文字列リテラルでのエスケープ

 

正規表現で一部の文字を検索したいとき、\でエスケープする必要があります。

 

正規表現リテラルでRegExpオブジェクトを作成する場合は、そのまま\を入力します。

 

正規表現リテラルでのエスケープ

 


const reg = /\./;
console.log( "abc.123".match( reg ) ); // "."

 

しかし、文字列を引数としてRegExpオブジェクトを作成する場合、同じ記述ではうまくいきません。

 

文字列リテラルでのエスケープ:失敗例

 


const reg = new RegExp( "\." );
console.log( "abc.123".match( reg ) ); // "a" ←期待した結果ではない

 


const reg = new RegExp( "\?" );
console.log( "abc?123".match( reg ) ); 
   // SyntaxError: nothing to repeat ←エラーになることもある

 

 

文字列リテラルでエスケープする場合は、次のように\を二つ入力します。

 

"\." → "\\."

 

文字列リテラルでのエスケープ:成功例

 


const reg = new RegExp( "\\." );
console.log( "abc.123".match( reg ) ); // "."

 


const reg = new RegExp( "\\?" );
console.log( "abc?123".match( reg ) ); // "?"

 

 

同様に正規表現リテラルで \d , \D , \s なども、\を二つ入力する必要があります。

 

正規表現リテラル例文字列リテラル
/\d/ "\\d"
/\D/ "\\D"
/\s/ "\\s"

 

また、ブラウザでユーザーが入力した文字や、サーバーとの通信で取得した文字などはそのまま使用できます。

 

文字列リテラルでのエスケープ:成功例

 


<script>

window.addEventListener( "DOMContentLoaded" , ()=> {
    const inTag = document.getElementById("in");

    inTag.addEventListener("change",()=>{
            const reg = new RegExp( inTag.value );
            console.log( "abc?123".match( reg ) );
        });
});
</script>
<input  type="text" id="in" >

 

上の例で表示される入力欄に \? と入力すると、その下に ? が表示されます。

 

実行結果

JavaScriptでエスケープが必要な文字

 

正規表現で検索対象とするとき、エスケープが必要な文字を挙げてみます。

 

文字エスケープ適用備考
正規表現リテラル文字列リテラル
\\\\\\エスケープ文字そのもの
.\.\\.改行以外の一文字にマッチ
*\*\\*直前のパターンを0回以上

繰り返すとマッチ

+\+\\+直前のパターンを1回以上

繰り返すとマッチ

?\?\\?最短マッチ
[\[\\[[]内の一文字にマッチ。

]はエスケープの必要なし

{\{\\{{}内で繰り返し数を指定。

}はエスケープの必要なし

( )\( \)\\( \\)グループまたは後読み先読み。

( )の両方でエスケープ必要

^\^\\^行頭を表す
$\$\\$行末を表す
|\-\\-[ ]内のみエスケープ必要
-\|\\|条件一致
/\//正規表現リテラルを表す文字。

文字列リテラルはエスケープの必要なし

""\"文字列リテラルを表す文字。

文字列リテラルを ' ' で囲む場合
および、正規表現リテラルはエスケープの必要なし。
※文字列の仕様であり正規表現とは関係ありません。

''\'文字列リテラルを表す文字。

文字列リテラルを " " で囲む場合
および、正規表現リテラルはエスケープの必要なし
※文字列の仕様であり正規表現とは関係ありません。

 

( ) は前後共にエスケープが必要です。
それに対して、[ ] と { } は閉じカッコにエスケープが必要ありません。
しかし、エスケープしても動作します。

 

文字列リテラルで\が二つ必要な理由

 

正規表現リテラルでは\が一つで済むのに、なぜ文字列リテラルは二つ必要なのでしょうか。

 

まずは文字列リテラルの仕組みを知る必要があります。

 

JavaScriptのシステムがスクリプトコードを読み込む際、文字列リテラルは文字列データに変換されます。
そのとき、\nなどのエスケープ文字を表す文字列は、内部的に一つの文字データに変換されます。

 

文字列リテラルの変換例

 

スクリプトコード:
const text = "今日は\n雨"

 

 

JavaScriptシステムが文字列に変換:

text : {

0 : "今"

1 : "日"
2: "は"
3: 0x0a (改行コード)
4: "雨"

}

 

では、"\."や"\?"はどうなるのでしょうか。

 

こちらは、\が消えて "." や "?" に変換されます。

 

文字列リテラル例文字列データ
"\." "."
"\?" "?"
"\*" "*"

 

 

new RegExp( ) は、この文字列を処理することになります。

 

つまり、"\."は . として、"\?"は ? として処理され、エスケープは適用されません。

 

エスケープとして適用するには、文字列データ内に \ を残す必要があります。

 

\ を残すには、次表のように \を二つ続けて入力します。

 

文字列リテラル例文字列データ
"\\." "\."
"\\?" "\?"
"\\*" "\*"

 

このデータをnew RegExp( )が解釈すると、エスケープが適用されます。

 

 

 

 

 

 

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    期間限定情報:
    7/16から7/18は63時間のビッグセール!
    欲しかったアレが安く手に入るチャンスです
    忘れずにチェックしてください!
    僕は以前のタイムセール祭りで4Kモニタが買ったけど、それより安かったらどうしよう・・・

    さらにお得なポイントアップキャンペーンも同時開催!

    記事の内容について

     

    こんにちはけーちゃんです。
    説明するのって難しいですね。


    「なんか言ってることおかしくない?」
    たぶん、こんなご意見あると思います。

    裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

    そんなときは、ご意見もらえたら嬉しいです。

    ご意見はこちら。
    https://note.affi-sapo-sv.com/info.php

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。