JavaScript

replaceの$1,$2って何?【JavaScript】【正規表現】

この記事ではreplaceで正規表現とともに使われる$1や$2について解説します。

replaceの$1,$2の使い方

replaceの基本形は replace( 検索文字 , 置換後文字)です。

$1,$2がつくと難しく思えますが、この基本形は変わりません。

$1,$2を使った実例

まずは実際に動作を見てみましょう。

var str = '今日は2019年6月16日、明日は2019年6月17日です。';
var result1 = str.replace( /(\d+)年(\d+)月(\d+)日/g , "$1/$2/$3" );
console.log(result1);

var result2 = str.replace( /(\d+)年(\d+)月(\d+)日/g , "$2/$3($1)" );
console.log(result2);
// 結果
今日は2019/6/16、明日は2019/6/17です。
今日は6/16(2019)、明日は6/17(2019)です。

コードの解説

/(\d+)年(\d+)月(\d+)日/g

この部分は正規表現です。

//に挟まれた部分が検索条件です。\dは0~9の数値を指します。+は直前の1回以上の繰り返しを指します。\d+で数値の繰り返しを指します。

以上から/\d+年\d+月\d+日/の正規表現で「xxxx年xx月xx日」が検索条件に該当します。

最後の「g」は「xxxx年xx月xx日」に該当するもの全て。という意味でしたね。(参照:正規表現のフラグ【g,m,i】

ポイントは()

ポイントはカッコ()の部分です。

/\d+年\d+月\d+日/で「xxxx年xx月xx日」の検索に該当しますが、このソースコードでは、/(\d+)年(\d+)月(\d+)日/となっています。

このカッコ()がポイントです。このカッコ内の条件が前から順に$1,$2…と使われます。

上記の画像のようなイメージです。

そのため、はじめの例にある$2/$3($1)は、6/16(2019)のようになります。

実際に触ってみよう

実際に$1,$2を使ったreplaceを触って試してみてください。


以上、JavaScriptのreplaceの$1,$2などについて解説しました。

replaceについては以下の記事でも解説しています。

replaceは正規表現と一緒に使うと様々なことができるようになります。

正規表現については以下の記事でも解説しています。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-,

© 2020 ウェブつく Powered by AFFINGER5