【初級編2】JavaScriptのreplaceで文字列の置換を行おう

JavaScript入門

本記事ではJavaScriptのreplaceについて解説します。

replaceは文字列を操作する場合において必ず使うものです。

たとえば、ユーザーの入力データをチェックしたりサーバー側からデータを受け取ったりする場合に使います。

joinやsplitと並んで多く使うメソッドなので使い方を覚えておきましょう。

JavaScriptのreplaceとは?

JavaScriptのreplaceとは、文字列を置換するメソッドのことです。

例えば「apple」という文字列を「Apple」に変換する、といったことができます。

replaceメソッドは、以下のように書きます。

{文字列}.replace({変換前の文字}, {変換後の文字}’);

replaceメソッドは引数を必ず2つつけなくては動きません。

replaceの基本的な使い方

それではreplaceメソッドの具体的な使い方をみていきましょう。

以下の項目に分割して解説していきます。

  • 1つの文字列を置換する
  • 複数の文字列を置換する

1つの文字列を置換する

まずはreplaceで文字列を置換する方法から解説します。

○コード例

<!DOCTYPE html> <html> <head> <title>テスト画面</title> </head> <body> <script> var data = '000-1111'; var data2 = data.replace('-', '_'); document.write(data2) </script> </body> </html>

○実行結果

上記のコードではreplaceメソッドで「-」を「_」に置換しています。

そのため表示が「000_1111」になっていますね。

これがreplaceメソッドの基本的な使い方です。

複数の文字列を置換する

つづいてreplaceメソッドで、複数の文字列を一気に置換する方法をみていきましょう。

複数まとめて置換する場合、replaceメソッドを連続で使う手もありますが、正規表現を使うのがおすすめです。

○コード例

<!DOCTYPE html> <html> <head> <title>テスト画面</title> </head> <body> <script> var data = '000-1111-3333'; var data2 = data.replace(/-/g, '_'); document.write(data2) </script> </body> </html>

○実行結果

正規表現には「フラグ」という機能があることをご存知でしょうか。

gフラグを使うことで、複数の文字列を置換の対象とすることが可能です。

そのため、「000_1111_3333」になっていますね。

このように正規表現のgフラグを使えば、複数の置換が可能です。

なお、正規表現には他にもフラグがあるので、代表的なものを挙げておきます。

g 対象となる全ての文字を置き換える
i 大文字と小文字も関係なく置き換える
m ^と$がそれぞれ行頭と行末にもマッチする

replaceの応用的な使い方

つづいて、replaceの応用的な使い方を解説します。

以下の項目に分けて解説しましょう。

  • 大文字と小文字を一括で置換する
  • 改行コードに置換する
  • replace内で関数を使う

これらができるようになると、replaceメソッドに関する理解がより深まりますよ。

大文字と小文字を一括で置換する

大文字と小文字をまとめて置換したいなら、正規表現のiフラグとgフラグを両方使います。

○コード例

<!DOCTYPE html> <html> <head> <title>テスト画面</title> </head> <body> <script> var data = '000a1111A3333'; var data2 = data.replace(/a/ig, 'b'); document.write(data2) </script> </body> </html>

○実行結果

上記のコードでは「a」と「A」をまとめて「b」に置換しています。

iフラグを使うと、小文字大文字区別なく置換することが可能です。

改行コードを置換する

replaceメソッドを使って、改行コードをbrに置換することも可能です。

○コード例

<script> var data = "000¥n1111¥n3333"; var data2 = data.replace(/¥n/g,'<br>') document.write(data2) </script>

○実行結果

やり方は簡単で正規表現で「¥n」にマッチするか判定するだけです。

改行コードを置換するのはよくやるので覚えておきましょう。

replace内で関数を使う

最後にreplace内で関数を使う方法を解説しましう。

replaceメソッドの第二引数には、独自に作った関数を指定することが可能です。

関数を指定することで、複雑な置換処理を行うことができます。

○コード例

<!DOCTYPE html> <html> <head> <title>テスト画面</title> </head> <body> <script> var data = '000-1111-3333'; var data2 = data.replace(/[0-9]/g, countup);  function countup(num) {     return Number(num)+5 }  document.write(data2); </script> </body> </html>

○実行結果

上記の例では数値に「+5」していますね。

countup関数では変数numに「+5」し、replaceメソッドから呼び出しています

このように第二引数に関数を指定すれば、かなり自由に文字列を変換可能です。

まとめ

本記事ではreplaceメソッドについて解説しました。

replaceメソッドでの文字列の置換方法がお分かり頂けたでしょうか?

文字列を操作する場合replaceメソッドは必ず役立つので、使い方を覚えておきましょう。

また、replaceメソッドの関数に引数を持つと、より高度なことが可能になります。

次回はJavaScriptのjoinの使い方、をみていきましょう。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
Visited 29 times, 1 visit(s) today
READ  【初級編8】JavaScriptのイベント処理の作り方を理解しよう

コメント

タイトルとURLをコピーしました