今回は、文字列の中から任意の文字を別の文字に置換する「replace()」メソッドについて学習をしましょう！
JavaScriptには効率よく「置換」ができるメソッドが用意されていますが、簡単な方法から複雑な手法まで人によってさまざまなやり方があります。
本記事では以下のような構成で解説をしていきます！
- 【基礎】「replace」とは？
- 【基礎】「replace」の使い方
- 【実践】正規表現による「replace」の使い方
- 【実践】「replace」の活用事例
- 【まとめ】「replace」の使い方まとめ
この記事で、「replace」をしっかり学習してスキルアップを目指していきましょう！
＞＞＞ 今すぐ「replaceの使い方」を知りたい方はこちら
「replace」とは？
それでは、まず最初に「replace()」について基本的な知識から学習を進めていきましょう！
「replace()」は、任意の文字列を別の文字列に置き換える（置換）ことができるメソッドになります。JavaScriptで文字列を扱うケースは多くて、例えば「ユーザー名」や「日付」などを置換することは日常茶飯事です。
例えば、次のような置換があります。
//日付の置換 2018-03-30 ⇒ 2018年03月30日 //ユーザー名の置換 user 001 ⇒ user_001
この例は、日付の「-」を「年月日」に置換したり、ユーザー名の「空白」部分を「_」に置換しています。
文字列を完全に別のキーワードへ置換することもできますが、一般的には上記のように一部分を置換することが多いです。
本記事では、「replace()」の基本から応用技まで体系的に学べるように構成しているのでぜひ参考にしてみてください！
「replace」の使い方
この章では、「replace」の基本的な使い方について学習していきます！
まずは、文字列の置換方法と複数文字列に対処する手法について見ていましょう。
任意の文字列を置換する方法
それでは、JavaScriptを使って「置換」を行う時に使う「replace()」メソッドの基本から学習していきましょう！
一般的な構文は次のとおりです！
var str = 文字列 str.replace( 対象の文字, 置換する文字 );
「文字列」の中から「対象の文字」を検索し、一致した文字を「置換する文字」に変換してくれます。
実際のコードで置換をやってみましょう！
文字列を用意して、「_（アンダーバー）」を「-（ハイフン）」に置換してみます。
var str = 'user_123'; var result = str.replace( '_', '-' ); console.log( result );
実行結果
user-123
この例では、文字列の中から「 _ 」を検索して「 – 」に置換しているのが分かりますね。
このように対象の文字を検索して置換するのが基本となるので、慣れておくようにしておきましょう！
複数の文字列を置換する方法
今度は、複数の文字列を置換したい場合の手法について見ていきましょう！
そこで、まずは複数のユーザー名に含まれている文字を普通に「replace()」するとどうなるか見ていきます。
var users = 'user_1, user_2, user_3';
var result = users.replace('_', '-');
console.log( result );
実行結果
user-1, user_2, user_3
実行結果を見ると、最初に一致した「user-1」だけが置換されており、あとに続く文字は置換されていませんよね。
つまり、「replace()」は最初に一致した文字を置換したらプログラムが終了するようになっているわけです！
そのため、すべての対象文字を置換したければ「while文」などを使って繰り返し処理を行う方法が考えられます。
var str = 'user_1, user_2, user_3';
var result = str.replace('_', '-');
//「str」と「result」が同じ文字列になるまで繰り返す
while(result !== str) {
str = str.replace('_', '-');
result = result.replace('_', '-');
}
console.log( result );
実行結果
user-1, user-2, user-3
実行結果を見ると、すべての対象文字が置換されているのが分かります。
しかしながら、この方法はあまり効率の良いプログラムではないうえバグも起きやすい方法と言えます。
そこで、もっと簡単に解決する方法として次の章では「正規表現」を活用した置換方法について学んでいきます！
正規表現で「replace」を使う
この章では、「replace」による置換を正規表現を活用して行う手法について学習していきます。
最も基本となる正規表現による置換方法から特殊文字を活用したパターンまで見ていきましょう！
任意の文字列を正規表現で置換する方法
まずは、基本的な正規表現による置換方法を学習していきます。
ちなみに、「正規表現」についてまだよく分からないという方は、次の記事で基本から応用まで学習できます！
わずか12個の特殊文字を覚えるだけで、今すぐ正規表現使うことができるようになるのでぜひ参考にしてみてください！
「replace()」に正規表現を使う場合は、【replace( 正規表現, 置換文字 )】のように第1引数に組み込んでいきます。
次のサンプル例を見てください！
var str = 'user-200, user-15, user-4505'; // 正規表現による指定 var result = str.replace(/user-\d\d,/, 'user-001,'); console.log( result );
実行結果
user-200, user-001, user-4505
この例では、文字列の中から「user-」に続いて2桁の数字を持つユーザー名を抽出して置換しています。
正規表現で「user-\d\d,」と指定することで、数値2桁と「,（カンマ）」を持つユーザー名を検索しています。
このように、replace()は簡単に正規表現を利用できる機能が備わっているという点を覚えておきましょう！
複数の文字列を正規表現で置換する方法
さて、今度は複数の文字列を正規表現を使って置換する方法を見ていきましょう！
正規表現では「フラグ」と呼ばれる機能を利用することで、簡単に複数文字列に対応することができます。
記述方法は簡単で【 /正規表現/g 】のように正規表現のあとに「g」を追加するだけです。
次のサンプル例を見てください！
var str = 'user_1, user_2, user_3'; // 正規表現に「g」フラグを追加 var result = str.replace(/_/g, '-'); console.log( result );
実行結果
user-1, user-2, user-3
「g」フラグを付与することで、すべての「 _ 」が「 – 」に置換されているのが分かりますね。
前章の「while文」を使った例よりもずっとシンプルで効率の良いプログラムになったことが分かります！
特殊文字を使った置換パターンの使い方
「replace()」は、特殊文字と正規表現の組み合わせでさらに置換を効率化できるので合わせて紹介しておきます！
例えば、正規表現の( )を使ってグループ化すると、対象の文字を「$1」「$2」という文字列で扱うことができます。
次の例は、正規表現のグループ化を利用して「性」「名」を反対に置換しています。
var str = 'Sato Taro'; var result = str.replace( /(\w+)\s(\w+)/, '$2 $1' ); console.log( result );
実行結果
Taro Sato
グループ化すると、「Sato」が「$1」に代入され「Taro」が「$2」に代入されます。
そのため、置換する文字を「’$2 $1’」と反対に記述すれば「姓・名」も反対になるというわけです。
また、特殊文字「$&」を利用すると一致した対象文字を抽出することができるので特定の文字列にまとめて置換したい場合に役立ちます！
var str = 'a, div, p'; var result = str.replace( /(a|p|div)/g, '<$&>' ); console.log( result );
実行結果
<a>, <div>, <p>
この例では、正規表現で「a」「div」「p」を検索して「$&」でそれぞれの文字列を抽出しています。
そして、それぞれの文字を「<$&>」のように記述することで、HTMLのタグに置換することができるわけです！
「replace」の活用事例
この章では、replaceを活用した実践的な置換手法について見ていきましょう！
主に、改行コード・空白・ダブルクオートに関連した置換について学んでいきます。
改行コードを「<br>」に置換する方法
まずは、改行コードを扱った置換について見ていきましょう！
改行コードはテキストファイルに含まれていたり、HTMLの入力ボックスなどから文字列を取得するようなケースで扱う場合が多いでしょう。
改行コードを何らかの文字列に置換する簡単な方法は「正規表現」を使って抽出する方法です。
例えば、次の例を見てください！
text.replace(/\r?\n/g, '<br>');
「text」に改行コード付きの文字列があるとして、replaceに正規表現で「/\r?\n/g」と記述すれば改行コードを抽出することができます。
この例では、改行コードを「<br>」に置換していますね。
空白をすべて削除する方法
次に、文字列の中に空白（ホワイトスペース）が含まれている場合に、その空白を削除する方法について見ていきましょう！
考え方としては、空白を「空文字」に置換するだけです！
例えば、次のサンプル例を見てください。
var str = 'あ いう え お かき く け こ'; str.replace(/\s+/g, '');
この例では、半角・全角の空白やタブなどが文字列に含まれています。
この文字列に対して、正規表現で「\s+」と記述すれば連続する空白も含めてすべて空文字に置換されます。
そのため、最終的には空白の無いきれいな文字列だけが残るというわけです。
ダブルクオートを置換する方法
今度は、「” ”（ダブルクオート）」の置換について見ていきましょう！（これは「’ ’（シングルクオート）」も同様です）
基本的には普通に置換をすれば良いのですが、replace()の第2引数の設定方法に注意が必要です。
次のサンプル例を見てください！
var str = 'あいう"え"お'; var r = str.replace(/"/g, "'");
この例では、文字列に「” “」が含まれているのが分かりますね。
ダブルクオートを抽出するのは「/”/g」のように記述すれば良いのですが、第2引数の設定は「” “」で囲んだ中に「’」を記述する必要があります。
逆に、シングルクオートをダブルクオートに置換するのであれば「’ ‘」で囲んだ中に「”」を記述するわけです。
意外に間違いやすいポイントなので覚えておきましょう！
「カンマ」の置換
この章では、置換するケースとしてよく使われる「,（カンマ）」について見ていきましょう！
主に、正規表現を活用したカンマの「除去」と「追加」について学んでいきます。
対象文字列のカンマをすべて除去する方法
まずは、文字列に含まれているカンマを除去する方法から見ていきましょう！
考え方としては、文字列内のカンマを抽出して「空文字」に置換すれば除去することが可能です。
次のサンプル例を見てください！
var str = '1,234,567'; var result = str.replace(/,/g, ''); console.log( result );
実行結果
1234567
この例では、文字列に含まれたカンマを正規表現で抽出して「空文字」に置換しているのが分かります。
「/,/g」という記述で、「g」フラグを使ったすべてのカンマを抽出しています。
この方法を覚えておくと、カンマだけでなく「 _ 」「 – 」などにも応用できるので便利です！
対象文字列にカンマを付与する方法
次に、カンマを付与する方法について見ていきましょう！
最も多いケースとして、数値の文字列を「3桁区切り」でカンマを付与したい場合を考えてみます。これは、正規表現と( )によるグループ化を組み合わせると実現できます。
例えば「123456789」という文字列に対して「/^(\d+)(\d{3})/」のように正規表現を指定します。すると「$1」に「123456」が格納されて「$2」に「789」が格納されますよね。
そのため「$1,$2」と指定すば「123456,789」に置換されます。
あとは、これを3桁区切りができなくなるまで繰り返せば、どんな数字の文字列でも3桁でカンマを付与できます！
次のサンプル例を見てください！
var str = '12345678999999';
var tmp = str.replace(/^(\d+)(\d{3})/,"$1,$2");
while (str !== tmp) {
str = tmp;
tmp = str.replace(/^(\d+)(\d{3})/,"$1,$2");
}
console.log( str );
実行結果
12,345,678,999,999
この例では、数字の文字列に対して( )でグループ化しつつ置換文字を「$1,$2」に設定しています。
さらに、while文で3桁ずつカンマが区切れなくなるまで繰り返しているのが分かります。
これにより実行結果のようなカンマ区切りが実現できるわけです！
関数で「replace」を使う
これまで「replace()」の第2引数には、「置換する文字」を指定していましたが、実はここに関数を指定することも可能です！
そのため、対象となる文字を抽出したあとに、独自に作った関数で複雑な処理を行うことができるようになり、活用範囲がさらにアップするわけです。
次の例では、対象文字をすべて小文字にする関数を組み込んだ例です。
var str = 'Jane, MIKE, BoB';
// 大文字の英語すべてに関数「toLower」を実行する
var result = str.replace( /[A-Z]/g, toLower );
// 関数の作成
function toLower( s ) {
// 取得した対象文字「s」を小文字にする
return s.toLowerCase();
}
console.log( result );
出力結果は…
jane, mike, bob
となります。
この例では、正規表現「/[A-Z]/g」で大文字の英語をすべて抽出し、関数「toLower」を作ってすべて小文字に変換した値を返すことで実現しています。
このように、関数を使えば「対象文字」を好きなように処理して結果を返すことができるので、応用範囲はかなり広いと言えます！
「split() / join()」の組み合わせ例
これまでは、「replace()」メソッドを使って置換の処理を行ってきましたが、実は配列処理を上手く応用することで、同じように「置換」を実現することが可能です！
利用するのは、文字列を分割して配列データに変換する「split」と、配列データを1つに繋ぎ合わせる「join」の2つです！
「split」は、指定した対象文字のところで分割し、配列データに変換していきいます。
var str = 'Jane,Mike,Bob,John'; // 「,」のところで文字列を分割する var result = str.split( ',' ); console.log( result );
出力結果は…
[ "Jane", "Mike", "Bob", "John" ]
となります。
この例では、「 , 」を指定することで人物名だけを抽出し、配列データに格納されているのが分かりますね。
そして、「join」はそれぞれの配列データを1つに繋ぎ合わせる処理を行うのが特徴です。
var str = [ 'Hello', 'My', 'name', 'is', 'Mike' ]; var result = str.join( ' ' ); console.log( result );
出力結果は…
Hello My name is Mike
となります。
この例では、「join( ‘ ‘ )」のように指定することで、それぞれの配列データに空白を付与しながら繋ぎ合わせることが出来るのです。
もし、「join( ‘-‘ )」のようにハイフンを付与すれば、「Hello-My-name-is-Mike」のような結果になるわけです。
そして、「split」と「join」を組み合わせることで、これまでと同じような「置換」を行うことが出来るわけです！
var str = 'user-01, user-02, user-03'; // 「split」「join」を組み合わせて置換を行う var result = str.split( '-' ).join( '_' ); console.log( result );
出力結果は…
user_01, user_02, user_03
となります。
この例では、文字列から「-（ハイフン）」の箇所で分割して配列にし、それを「_（アンダーバー）」を付与しながら1つに連結するという処理を行っています。
結果的に、「replace()」メソッドを使った時と同じように「置換」されているのが分かりますね。
「replace」の使い方まとめ
最後に、「replace」の使い方について簡単にまとめておきます。
まずは基本的なreplaceの使い方として、「_」を「-」に置換する方法は次のとおりです。
var str = 'user_123'; result = str.replace( '_', '-' );
replaceの第1引数に置換対象の文字を設定し、第2引数に置換する文字を指定します。
また、正規表現を使っても同じことが可能なうえ、複数の文字列を置換対象にすることができるので便利です。
var str = 'user_1, user_2, user_3'; result = str.replace(/_/g, '-');
正規表現で「/_/g」のように対象文字を指定すれば、すべての対象文字を置換することが可能です。
さらに、特殊文字を併用することで効率よく置換を行うこともできます。
var str = 'Sato Taro'; result = str.replace( /(\w+)\s(\w+)/, '$2 $1' );
正規表現の( )で囲んだグループは、「$1」「$2」という文字列で操作できるようになります。
上の例では、姓と名をそれぞれ$1 / $2に格納して逆に設定することで、姓名が反対になって取得できるわけです。
まとめ
今回は、JavaScriptにおけるさまざまな「置換」手法について学習してきました。
最後に、ポイントをもう一度振り返ってみましょう！
- 「replace()」は対象文字を1回だけ置換することができる
- 正規表現を活用することで多彩な置換手法を扱える
- 関数を組み込むことで、さらに複雑な文字操作を行える
- 「split() / join()」を上手く活用すれば「置換」を実現できる
という内容でした。
これらのポイントを踏まえながら、ぜひ自分なりの「置換」活用方法を見つけて実践してみてくださいね！
