【JavaScript】正規表現で文字列置換できるメソッドまとめ

JavaScriptには正規表現を使って置換ができるメソッドがいくつかあります。

そのメソッドの使い方やコード例についてまとめてみました。

正規表現が使える置換系メソッドまとめ

ここで紹介する置換系のメソッドは次の2つ

  • String.prototype.replace
  • String.prototype.split

この2つは置換対象の文字列を検索するのに正規表現が使用可能です。

それぞれの詳しい使い方とかコード例は次の通り

String.prototype.replace

その名の通り文字列を置換するためのメソッド

次のように文字列 str  に対して正規表現 regexp  、置換文字列 newSubstr  を渡して使います。

そしてこのメソッドの返り値は regexp  で発見したパターンを newSubstr  で置き換えた文字列

ただしreplaceメソッドで直接文字列が書き換えられるわけではないことに要注意です。

 

例えば次がreplaceメソッドと使って置換しているコード例

上コードのように replace  を実行したら返り値を元の文字列に代入するようにしてください。

先ほど書いたように単にreplaceメソッドだけを実行しても文字列は変化しないので注意

ちなみにパターンには /Dog/g  のように /  の最後にオプションを付けることもできます。

参考記事 : 正規表現オプションの意味と使い方まとめ

 

もう1つreplaceメソッドの使用例を挙げます。

例えば次は空白をハイフンに置き換えているコード例

こういう風に空白とかを一括で置き換えるのにreplaceメソッドは便利ですね。

 

以上がreplaceメソッドの使い方

Web開発などをしているとこのメソッドは結構頻繁に使います。

String.prototype.split

これは文字列をある区切り文字で分割するためのメソッド

次のように文字列 str  に対して 区切り文字 separator  、分割上限数 limit  を渡して使います。

このメソッドの1つめの引数 separator  に正規表現が指定可能です。

またどちらの引数も省略可能で、

  • 1つめを省略すると文字列全体
  • 2つめを省略すると区切り文字で全て分割された配列
  • 省略なしだと上限数まで分割された文字列配列

が返り値として返ってきます。

 

例えば次は「コンマ+1つ以上の空白」を区切り文字に文字列を分割しているコード例

/\s+/g  がコンマと1つ以上の空白文字を表す区切り文字になります。

このコードのコンソールへの出力結果は次の通り

この出力結果を見て分かるように配列で返ってくるというのが特徴です。

 

また次は分割上限数  limit  を指定したsplitメソッドのコード例

この場合だと limit  に 3 を指定しているので分割は3回までしか行われません。

なのでこのコードのコンソールへの出力結果は次の通り

4つ目以降は配列に含まれず無視されます。

分割上限を超えた場合、上限を超えたその結果は配列に含まれないことに注意です。

 

以上がsplitメソッドの使い方

特定のフォーマットの文字列をスマートに分割したい時とかによく使います。

例 : コンマで区切られたCSVデータなど...

ここまでのまとめ

ここまでで紹介したメソッドをもう一度まとめ

  • String.prototype.replace

    文字列 str  に対して正規表現 regexp  、置換文字列 newSubstr  を渡して使う

    ただし文字列そのものは変化しないことに注意

  • String.prototype.split

    文字列 str  に対して 区切り文字 separator  、分割上限数 limit  を渡して使う

    返り値は区切り文字で分割された文字列配列

以上で正規表現が使える置換系メソッドについてまとめました。