【JavaScript】replace()で指定した文字列を別の文字列に置き換える!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年10月10日に投稿されました。)

JavaScriptで文字列を置換する方法として、replace()があります。

replace()とは文字列を指定した文字列に置換するメソッドになります。

文字列を置換することから、置換した後の文字列を返り値として返すようになります。

そして、replace()はそれぞれのパラメータに文字列を指定することによって置換が行われ、正規表現を指定すると、パターンに該当する全ての文字列の続きを置換することができます。

しかし、1つの文字列しか置換できませんので注意が必要です。

また、replace()を上手く利用することで、文字列を置換することなく削除することもできます。

この記事を読むと、replace()の使い方を完全に理解できますので、詳しく知りたい方はご参考ください。

今回はJavaScriptのreplace()で指定した文字列を別の文字列に置き換える方法について紹介していきます。

この記事はこんな方におすすめ
・指定した文字列を別の文字列に置き換えたい場合

replace()とは

replace()とは、文字列を指定した文字列に置換するメソッドになります。

指定する文字列に該当するのであれば、文字列の途中であったとしても置き換えるようになります。

replace()の書き方

replace()の書き方は下記のようになります。

対象の文字列の後ろにreplace()と追記し、必須パラメータを2つ指定します。

replace()のパラメータ

replace()パラメータは下記のようになります。

  1. 置換する文字列(必須):
    置換する文字列を指定した文字列から指定する
  2. 新しい文字列(必須):
    置き換えるための新しい文字列を指定する

必須パラメータである「置換する文字列」と「新しい文字列」を指定します。

replace()の返り値

replace()は「置換した後の文字列」を返り値として返すようになります。

replace()で指定した文字列を別の文字列に置き換えるサンプルコード

replace()で置指定した文字列を別の文字列に置き換えるサンプルコードをご紹介します。

ここでは、下記の3つのパターンでreplace()を使用します。

  1. 置換する文字列に存在する文字列を指定する場合
  2. 置換する文字列に存在しない文字列を指定する場合
  3. 置換する文字列に重複する文字列を指定する場合

置換する文字列に存在する文字列を指定する場合

置換する文字列に存在する文字列を指定する場合にreplace()を使用してみます。

⚫︎ Main.js

実行結果

文字列に置換する文字列が存在する場合にreplace()を使用した結果

replace()によって、指定した文字列が別の文字列に置換されています。

そのため、「です」が「なります」に置き換わって表示されています。

置換する文字列に存在しない文字列を指定する場合

置換する文字列に存在しない文字列を指定する場合にreplace()を使用してみます。

⚫︎ Main.js

実行結果

文字列に置換する文字列が存在しない場合にreplace()を使用した結果

指定した文字列が存在しない場合は、置換が行われていません。

そのため、指定した文字列がそのまま表示されています。

置換する文字列に重複する文字列を指定する場合

置換する文字列に重複する文字列を指定する場合にreplace()を使用してみます。

⚫︎ Main.js

実行結果

文字列に置換する文字列が重複している場合にreplace()を使用した結果

置換する文字列が重複する場合は、最初に出てきた文字列だけ置換が行われます。

そのため、1つ目の「アメリカ」だけが「USA」に置き換わって表示されています。

replace()で正規表現の文字列を別の文字列に置き換える場合

replace()で正規表現の文字列を置き換えるには、replace()のパラメータである「置換する文字列」に「正規表現」を指定します。

正規表現を指定することで置換する文字列をパターン化し、そのパターンに該当する文字列を別の文字列に置き換えることができます。

⚫︎ Main.js

実行結果

正規表現でreplace()で指定した文字列を別の文字列に置き換えた結果

replace()に正規表現を使用することで、指定した正規表現の文字列が別の文字列に置換されています。

そのため、「AからZで成り立つ3文字の文字列」のパターンである「USA」が「アメリカ」に置き換わって表示されています。

もし、正規表現による文字列の置換について詳しく知りたい場合は下記の記事をご参考ください。

replace()で指定した文字列を削除する場合

replace()で指定した文字列を削除するには、replace()のパラメータである「新しい文字列」に「空文字」を指定します。

空文字を指定することで、何もない文字に列として置換できるため、置換する文字列を削除することができます。

⚫︎ Main.js

実行結果

replace()で指定した文字列を削除した結果

新しい文字列に空文字を指定することで、指定した文字列を削除することができます。

そのため、「合衆国」の文字列が取り覗かれて表示されています。

replace()を実際に使用できるざまざまなケース

replace()を実際に使用できるケースについてご紹介します。

ここでは、下記の2つのケースを簡単に解説します。

表示するための不要な文字列を削除する場合

replace()で表示するための不要な文字列を削除することができます。

例えば、ハイフンありの電話番号のデータを、replace()でハイフンを削除して表示してみます。

⚫︎ index.html

実行結果

replace()でハイフンを削除して電話番号のデータを表示した結果

replace()で入力した文字列から指定した文字列が削除しています。

そのため、入力した電話番号のハイフンが削除されて表示されています。

特定の文字列を変換して表示する場合

replace()で特定の文字列を変換して表示することができます。

例えば、英字のデータをreplace()でカタカナに変換して表示してみます。

⚫︎ index.html

実行結果

replace()で英字のデータをカタカナに変換して表示した結果

入力した英字の文字列がカタカナに変換されて表示されています。

そのため「amerika」が「アメリカ」に変換されて画面に表示されています。

一致する全ての文字列を別の文字列に置き換える場合

一致する全ての文字列を別の文字列に置き換える場合は、replaceAll()を使用します。

replaceAll()とは、今回紹介しているreplace()と同じで、指定し文字列を別の文字列に置き換えるメソッドになります。

しかし、指定した全ての文字列を別の文字列に置換することができます。

⚫︎ Main.js

実行結果

replaceAll()で一致する全ての文字列を別の文字列に置き換えた結果

replaceAll()によって、一致する全ての文字列を別の文字列に置換しています。

そのため、「アメリカ」の文字列が全て「あめりか」に置き換わって表示されています。

配列の要素を指定した要素に置き換える場合

配列の要素を指定した別の要素に置換する場合は、splice()を使用します。

splice()とは、指定した配列の要素を別の要素に置換するメソッドになります。

⚫︎ Main.js

実行結果

splice()で配列の要素を指定した要素に置き換えた結果

splice()によって、配列の要素を指定した別の要素に置換しています。

そのため、「テキサス」の要素が「ジョージア」に置き換わって配列に格納されています。

splice()の使い方については別の記事で紹介してますので、詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ replace()とは、文字列を指定した文字列に置換するメソッドである

⚫︎ replace()は下記のパラメータを指定して使用する
・置換する文字列(必須)
・新しい文字列(必須)

⚫︎ replace()の置換する文字列が文字列中に存在する場合は、該当する部分を置き換える

⚫︎ replace()の置換する文字列が文字列中に存在しない場合は、置き換えは行わない

⚫︎ replace()の置換する文字列が文字列中に重複する場合は、最初に出てきた文字列のみを置き換える

⚫︎ replace()で正規表現を使って文字列の置換を行うにはパラメータの置換する文字列に正規表現を指定する

⚫︎ replace()で指定した文字列を削除するには、パラメータの新しい文字列に空文字を指定する

⚫︎ replace()は下記のような様々な場面で使用することができる
・表示するための不要な文字列を削除する場合
・特定の文字列を変換して表示する場合

⚫︎ 一致する全ての文字列を別の文字列に置き換える場合は、replaceAll()を使用する

⚫︎ 配列の要素を別の配列に置き換える場合は、splice()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA