この記事ではJavaScriptで、複数の異なる文字列を一括で置換・削除する方法を紹介します。
replaceとメソッドチェーンを使います。
replaceの基本から順に見ていきましょう。
replaceの基本形
var str1 ='りんご、みかん、バナナ、りんご';
var result1 = str1.replace('りんご', '苺');
console.log(result1);
// => 苺、みかん、バナナ、りんごreplaceの基本形は下記です。
replace(置換したい文字,置換後の文字)
ここで見てほしいのは、はじめの「りんご」しか「苺」に置換されていないことです。
正規表現を使ってすべての指定文字を置換
var str2 ='りんご、みかん、バナナ、りんご';
var result2 = str2.replace(/りんご/g, '苺');
console.log(result2);
// => 苺、みかん、バナナ、苺/文字/とすることで、置換したい文字すべてを一括で変換することができます。
正規表現については、もっと色々な事ができるので、別の記事でまとめました。
複数の文字を変換する場合はメソッドチェーンを使う
それでは本題の、「複数の文字を置換したい場合」を解説します。
これも難しくはありません。メソッドチェーンを使います。
var str3 ='りんご、みかん、バナナ、りんご';
var result3 = str3.replace(/りんご/g, '苺').replace(/みかん/g, 'ラ・フランス');
console.log(result3);
// => 苺、ラ・フランス、バナナ、苺replace().replace()とつなげることによって、複数の文字列の置換ができます。
replaceは置換だけでなく削除にも使える
上記ではreplaceの「置換」について説明してきましたがreplaceは「削除」にも利用できます。
var str4 ='りんご、みかん、バナナ、りんご';
var result4 = str4.replace(/りんご/g, '').replace(/みかん/g, '').replace(/、/g, '');
console.log(result4);
//=> バナナ置換後の文字を''とすることで、削除できます。
この例では、「りんご」「みかん」「、」を削除しているので、バナナだけになっています。
replaceを触ってみよう
上記の例の実際のコードを用意しましたので、触ってみましょう。
以下の記事もreplaceや正規表現関連で参考になります。
≫replaceの$1,$2って何？【JavaScript】【正規表現】
