JavaScript

複数の異なる文字列を置換・削除する【replace/JavaScript】

この記事では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);
// => 苺、みかん、バナナ、苺

/文字/とすることで、置換したい文字すべてを一括で変換することができます。

正規表現については、もっと色々な事ができるので、別の記事でまとめました。

≫JavaScriptで正規表現を触ってみる

複数の文字を変換する場合はメソッドチェーンを使う

それでは本題の、「複数の文字を置換したい場合」を解説します。

これも難しくはありません。メソッドチェーンを使います。

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】【正規表現】

≫parseIntとreplaceで数字からカンマを取り除く【JavaScript】

≫stringとreplaceで数値をカンマ区切りにする【JavaScript】


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-,

© 2020 ウェブつく Powered by AFFINGER5