総合 ゲーム 画像動画

【ゼロからはじめるプログラミング】JavaScript学習 #29

ゼロからはじめるプログラミング講座の第四十一回です。今回は文字の置換と正規表現を解説します。正規表現は少しややこしいので慣れが必要です。

 

  1. 文字列を置き換えてみよう。
  2. 正規表現を使ってみよう。
  3. 練習問題を解いてみよう。

 

 

文字列を置き換えてみよう。

さっそくコードを確認してみましょう。

var str = "string123"
console.log(str)
str = str.replace("ring","r")
console.log(str)
string123
str123

 

文字列.replace(置き換えたい文字列,置き換える文字列)

という形で使います。replaceは第一引数に指定した文字列を第二引数の文字列に変えた文字列を返します。返すだけで元の変数に入っている文字列は変わりません。

 

replaceは見つけた1つ目の文字列しか変更しないので少し工夫が必要です。

var str = "stringring123"
console.log(str.replace("ring",""))
console.log(str.replace(/ring/g,""))
string123
st123

 

第二引数に空文字を入れることで擬似的に文字列を削除することができます。

最初のコンソールでは”ring”が1つ残っています。2つ目は全て”ring”が消えています。

/ring/gと何やら今までと違う””クォーテーションで囲んでいない文字列とgという文字がついています。この表記は正規表現というものです。

 

 

正規表現を使ってみよう。

正規表現とは

文字列をいろいろな条件で指定する方法です。

  • 私の好きな果物はリンゴです。
  • 彼の好きな果物はぶどうです。
  • 彼の好きな果物はパイナップルです。

このような文字列があったとします。この文字列から「好きな果物は○○○です。」という部分を別の文字列に置き換えたりしたいとします。

正規表現を使わない場合、○○○の部分に合わせてreplaceの第一引数を変更しなくてはいけません。これは非常に大変なので正規表現の出番です。

 

とりあえず実際に使って確認しましょう。

var str = "私の好きな果物はリンゴです。\n"+
          "彼の好きな果物はぶどうです。\n"+
          "彼の好きな果物はパイナップルです。"
str = str.replace(/好きな果物は.{3}です。/g, "置き換えました。")
console.log(str)
私の置き換えました。
彼の置き換えました。
彼の好きな果物はパイナップルです。

 

リンゴとぶとうが含まれた文字列はreplaceで置き換えられました。

str = str.replace(/好きな果物は.{3}です。/g, “置き換えました。”)

今回は「どんな文字でも良いので三文字で」という条件で第一引数を指定しました。

このような指定を正規表現なしで実装するには手間がかかります。正規表現ならこの通り少しの記述で済みます。しかし正規表現は慣れるまで扱いにくいです。

 

正規表現における特殊文字

. ^ $ [ ] * + ? | ( )

これらの11文字は正規表現内/ /では通常の文字としては認識されません。

全てに命令がある文字として認識されます。これらを文字として認識させたい場合はエスケープ文字を前に置きましょう。「.」ドットをドットとして扱いたい場合は「\.」と書きましょう。

 

特殊文字の役割

. 改行以外の任意の1文字。
^ 行の先頭。[]内では否定の意味。
$ 行末を表す。
[] 囲った範囲の文字のいずれかにマッチする場合を表す。
* 前の文字が連続する場合。(何文字でも良い0-n)
+ 前の文字が1文字以上連続する場合。
? 前の文字が1文字だけの場合。
| ()内で指定したもののいずれか or。
() グループ化したものを特殊文字の対象にする。

 

これらをざっくりと解説します。

まず^と$は行頭行末を意味します。

/^あ/なら行頭のだけを、/$あ/なら行末のだけを指定します。

 

.ドットはなんでも良い1文字を指定します。繰り返しと合わせて使うことが多いです。

 

*アスタリスクは同じ文字が0~n回連続している場合を指定します。

/あ*/だと「いあああ」と「い」の両方を指定できます。

+も同じように連続した文字を指定しますが必ず1文字以上連続している場合です。

/あ+/だと「いあ」は条件に当てはまりません。

 

[]角括弧は複数の指定した文字を対象とします。

/あ[あいう]う/だと「ああう」「あいう」「あうう」を指定できます。

 

()は特殊文字の対象範囲を広げるような使い方をします。普通は直前の1文字だけです。

/(あい)*/だと「ああいあいあ」を指定できます。

 

この他に{ }波括弧があります。中に数値を入れて出現回数を指定します。

  • {n} n回
  • {n,} n回以上
  • {,n} n回以下 ※0回を含む
  • {m,n} m回~n回

 

これらを組み合わせてよく使うものを紹介します。

  • .* なんでも良い文字が何文字でも指定できる。
  • $\n 行末の改行を指定する。
  • \s* スペースを全て指定する。

今はこの3つぐらいを覚えておくと良いでしょう。使いたいときに調べて慣れていきましょう。「正規表現」で検索すればたくさん出てきます。

/正規表現/g このgはフラグと呼ばれるもので意味は文全体を検索するです。1つ目が見つかったとしても全文検索してくれます。

 

 

練習問題を解いてみよう。

 

  1. 変数strに「 “私の好きな食べ物は肉じゃがです。\n”+
    “彼の好きな食べ物は肉です。\n”+
    “彼の好きな食べ物はじゃがいもです。\n”+
    “彼の好きな食べ物はホクホクの新じゃがです。”」を代入しなさい。
  2. 変数strの中にあるジャガイモを使った料理をジャガイモ料理と書き換えてコンソールにstrを表示させなさい。(一度のreplaceで解きなさい。)

 

正解するとこうなります。

私の好きな食べ物はジャガイモ料理です。
彼の好きな食べ物は肉です。
彼の好きな食べ物はジャガイモ料理です。
彼の好きな食べ物はジャガイモ料理です

 

解答例はこうです。(マウスオーバーで表示)

var str = "私の好きな食べ物は肉じゃがです。\n"+
          "彼の好きな食べ物は肉です。\n"+
          "彼の好きな食べ物はじゃがいもです。\n"+
          "彼の好きな食べ物はホクホクの新じゃがです。"
str = str.replace(/食べ物は.*じゃが.*です。/g, "食べ物はジャガイモ料理です。")
console.log(str)

 

お疲れ様でした。正規表現はとても便利ですが慣れるまでややこしいので頑張って覚えましょう。次回はvarの代わりになる新しい構文を解説します。

次も頑張って記事を作るのでチャレンジしてください!

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。