本記事では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の使い方、をみていきましょう。
コメント