こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptでの文字の置換方法について説明します。プログラムにおいて、同じ文字を一括して変換したい時がありますよね。しかし、他のプログラミング言語とのやり方が違ったりすることもあります。
JavaScriptの文字の置換について、複数の文字列を一括して置換する方法なども解説するので、JavaScriptの学習を始めた方や、オリジナルの一部を変更したプログラムを書く予定の人はぜひ読んでみてください！
目次
文字の置換とは？
文字の置換とはそのままの意味で、別の言葉や単語に置き換えるという意味です。「自分で消して書き換えればいいじゃん」とも思うかもしれませんが、同じ単語を別の統一した単語に置き換えたいときに、一括で出来たら、めちゃめちゃ楽な上に、時間短縮にもなります！
筆者もデータサイエンスに関連したプログラムを作成しているときに、計算の変数を一括して置換したりと、とても使用頻度が高いメソッドです。
文字の置換方法は、大きく2つに分けられます。完全一致の文字列を探すか、完全一致でなく特定のパターンを置換するかです。その際に、正規表現という概念を知る必要があります。正規表現を理解することで、繰り返し表現を検索出来たりやバグを減らすことができるので、まずは簡単にJavaScriptの正規表現について確認しましょう！
JavaScriptの正規表現
ここからは、JavaScriptの正規表現について、簡単に説明致します。正規表現とは、文字列のパターンや組み合わせを照合するために用いられるものです。Pythonなどの他言語にも多く搭載されたメソッドで、目視で同じ言葉やパターンを探さずに済む優れた機能です。
正規表現の生成方法
JavaScriptでの正規表現の作成方法は2種類あります。RegExpオブジェクトのコンストラクタ関数を用いる方法と、正規表現リテラルで記述する方法です。専門用語なので、混乱しちゃいますよね。実際の記述例をもとに見てみましょう！
|
1 2 3 4 5 |
// リテラル var str = /abc/; // RegExpオブジェクトのコンストラクタ var str = new RegExp('abc'); |
上がリテラル型正規表現で下がRexExpオブジェクトのコンストラクタ関数を用いた表現になります。コンパイルするタイミングが異なり、完全一致の文章を探したいときはリテラル型が良く、パターンを指定するときなどはRegExpがおすすめです！
では、単純なパターンと繰り返し指定はどのように記述するのでしょうか。それぞれ解説します。
完全一致の記述法
|
1 |
var str = /abc/; |
完全一致の文字列については、スラッシュ「/」で対象の文字を挟んで記述します。記述された文字の順序に並んでいる文字列を検索するときに使用されます。上記の例では「abc」と記述されている文字列を検索し、”123abc456″では検索がヒットしますが、”123ab45c6″や”123cba456″のように、検索文字列が分離している場合や順序が合ってないときは検索から漏れます。
特殊記号を用いた繰り返しパターンの記述法
完全一致に比べて、より詳細な条件を設けてパターンを限定したいときに用います。正規表現で利用できる記号や特殊文字を用いたパターンはいくつもありますが、ここではその一例を紹介します。
|
1 |
var str = /^a/; |
ここでは、’a’という文字の前に特殊記号のカレット「^」を記述しました。これは、行の先頭に対象の文字があった場合はヒットするという意味になります。そのため、今回は”abc”のような文字列は検索がヒットしますが、”bac”や”cba”のような「a」が先頭にない場合は検索から漏れます。
他にも特殊記号や文字を用いて、いろいろ条件を設定できるので、詳しくは、以下の記事などを参考にしてみてください！
JavaScriptでの文字の置換方法
では、JavaScriptにおける文字列の置換方法について説明します。まずはじめに、文字列の置換で用いるメソッドのreplaceについて、用法などを簡単に説明します。その後、replaceメソッドを用いた実際の使用例をご紹介します。
replaceでの置換
replaceは和訳すると「交換」という意味なので、覚えやすいメソッド名ですよね。使い方もとてもシンプルで、replaceを用いた構文は次のようになります。
|
1 2 |
var str = '検索対象の文字列'; str.replace(検索したい文字, 置換する文字); |
上の構文は、1行目で検索される文字列をstrという変数に格納しています。格納された検索対象の文字列strをreplaceの前に書き、str.replaceと2行目で記述しています。str.replaceメソッドの括弧内の前半に、str内で検索したい文字を書き、後半に実際に置換したあとに挿入したい文字を記述すれば、検索かけた文字を置換できます。
注意点として、検索対象の文字列に複数個所検索したい文字があったとしても、replaceメソッドは最初の文字しか置換しません。つまり、検索し見つかったら終了するということに注意する必要があります。次の章で、実際にreplaceメソッドを用いたプログラムを用いて説明します。複数個所変更したい場合のプログラムの記述例も紹介するので、ぜひ参考にしてください。
正規表現を用いたreplaceでの置換
では、実際のプログラムを見てみましょう。ここでは実際のプログラムでよく用いる例を用いて説明します。なお、今回はリテラル型の正規表現を用います。
完全一致の場合の置換
|
1 2 3 4 5 6 7 8 |
// 検索対象の文字列str var str = 'hare-ame-kumori'; // replaceメソッド var after = str.replace('ame','kaminari'); // 置換された文字列表示 console.log(after); // 'hare-kaminari-kumori'が表示される |
最初に、”hare-ame-kumori”という文字列を定義し、変数strに格納しました。5行目でreplaceメソッドを用いて、「strの文字列の中に、’ame’という文字があったら’kaminari’という文字に置換し、変数afterに格納する」という構文になっています。strの文字列の中に検索したい文字があるので置換され、8行目では「’ame’→’kaminari’」になった”hare-kaminari-kumori”が表示されます。
特殊記号を用いた文字の置換
|
1 2 3 4 5 6 7 8 |
// 変数item_numberを定義 var item_number = "123-4567-89012"; // replaceメソッド var result = item_number.replace(/\d{4}/,'****'); // 置換結果を表示 console.log(result); // 123-****-89012 |
ここでは、数字を検索する特殊文字「\d」を用いました。「\d{4}」で、4桁の数字を検索しています。変数item_numberに格納されている文字列の中で、4桁の数字が並んでいるのは、真ん中の’4567’なので、ここが「****」に置換されます。そのため、8行目では”123-****-89012″が表示されます。
複数個所の置換
|
1 2 3 4 5 6 7 8 9 10 |
// 変数groupを定義 var group = 'a_1, a_2, a_3'; // replaceメソッド var result_1 = group.replace(/_/, '-'); // 「/_/」を置換 var result_2 = group.replace(/_/g, '-'); // 「/_/g」と'g'フラグを付与して置換 // 置換結果を表示 console.log(result_1); // "a-1, a_2, a_3"が表示される console.log(result_2); // "a-1, a-2, a-3"が表示される |
複数個所を置換したい場合は、検索したい文字に「’g’フラグ」をつけて検索することで、置換対象が条件を満たすものすべてになります。そのため、’g’フラグが付与されていないresult_1の結果は”a-1, a_2, a_3″となり、付与されているresult_2は”a-1, a-2, a-3″が表示されます。while文などを用いて、すべて置換されるまでプログラム実行するといった書き方もできますが、フラグを付与する方が楽なのでおすすめです！
まとめ
いかがでしたでしょうか？今回は、JavaScriptのreplaceを用いた文字の置換方法について説明しました。
文字の置換方法と正規表現などを組み合わせると、プログラムの効率性が格段と上昇します。また、顧客に情報を入力してもらった際に、全角や半角などの統一も簡単に行えます！ぜひ、JavaScriptのreplaceについて理解し、Webサービス作成やシステム構築に活かしてください。
