超便利！replaceを使った文字列置換・正規表現の使い方！

18/11/18 14:03:16 19/05/05 15:04:21

replaceメソッドによって文字列置換、正規表現への置換が使える言語はいくつかありますが、今回はJavaScriptをベースに解説していきます。replaceメソッドは対象を完全に別の文字列に置き換えることも可能なのですが、どちらかというとちょっとした形式の変更などに使用されることが多いです。

具体的には、システムの日付表示の方法が変わったから正規表現を指定して表示形式を変えておく、などの使い方になります。文字列置換は直接置き換える文字列を指定する方法と正規表現を指定して置き換える方法があるので、それぞれ解説していきます。

1 基本的な置換処理
2 正規表現を用いた置換方法
3 特殊文字を使った置換
4 第二引数に関数を指定する
5 案件量が豊富なアルマサーチ

基本的な置換処理

まずはもっとも簡単な置換処理を紹介します。サンプルコードは以下です。

var class= '1_1';
var result = class.replace( '_', '-' );
console.log( result );

宣言部分は割愛していますが、上記のソースコードを実行すると以下のようにコンソール出力されます。

1-1

アンダーバーがハイフンに置き換えられました。上記のコードでは一つだけを置き換えていますが、一つだけなら普通に書き換えた方が早いです。もちろんreplaceメソッドは一つの要素だけを書き換えるためのメソッドではないため、複数の要素を書き換えることができます。

複数の要素の書き換えの前に、複数の要素に対して普通に処理を記述した場合どうなるか確認します。

var class = '1_1, 1_2, 1_3';
var result = class.replace('_', '-');
console.log( result );

上記のコードを実行すると、以下のようにコンソール出力されます。

1-1, 1_2, 1_3

最初に一致した1_1だけが1-1に置き換えられました。replaceの仕様上一致した瞬間置き換えて処理終了するようになっているため、最後まで検索してくれる機能がないのです。おそらく、最後まで検索して置き換える場合と分けるためにあえてこのような仕様になっているのだと思います。

上記の例だと最初の1組だけ置き換わっていて違和感があるのですが、最初だけを書き換えたい場合もあります。そこで最後まで検索して置き換える場合以下のように記述します。

var class = '1_1, 2_2, 3_3';
var result = class.replace('_', '-');
//「class」と「result」が同じ文字列になるまで繰り返す
while(result !== class) {
　　　　class = class.replace('_', '-');
　　　　result = result.replace('_', '-');
}
console.log( result );

上記のコードを実行すると、以下のようにコンソール出力されます。

1-1, 1-2, 1-3

すべてのクラスがハイフンに置き換えられました。これで一応はすべて置き換えられたのですが、実際のシステムだと関係ないアンダーバーまでハイフンに置き換えてしまうかもしれません。

たとえば変数のなかに上記のクラスだけでなく、名前、メールアドレスなども入っていたとします。そうすると、メールアドレスのアンダーバーまでハイフンに書き換えてしまうかもしれません。

そこで、正規表現を使用します。

正規表現を用いた置換方法

正規表現を用いて置換処理を実装すると以下のようになります。

var class= 'c-101, c-12, c-103';
// 正規表現による指定
var result = class.replace(/c-\d\d,/, 'c-000,');
console.log( result );

上記のソースコードを実行すると、以下のようにコンソール出力されます。

c-101, c-000, c-103

なぜこのようになるかというと、「c-\d\d,」で「c-数値二桁,」という条件に合致する要素を検索しているからです。条件に合致するのは「c-12,」だけなので、c-12だけがc-000に置き換えられました。

また、正規表現で複数要素を置き換える際は、whileのような繰り返し処理を実装する必要がありません。具体的には以下のような記述で済みます。

var class = c_1, c_2, c_3';
// 正規表現に「g」フラグを追加
var result = class.replace(/_/g, '-');
console.log( result );

上記のコードを実行すると、以下のようにコンソール出力されます。

c-1, c-2, c-3

gフラグとは、正規表現と一致する限り検索、置換を続けるためのフラグです。これを使用することで、while文を書かなくても自動的にすべての検索、置換を行います。gが何の略化はわかりませんが、going concernと覚えると良いかもしれません。

going concernは企業が将来に渡って継続的に事業を続けるようなことですが、邪魔ならconcernはなしでも良いかもしれません。goingだけだと行っている、と言う意味かもしれませんが、going concernのconcernを外したgoingです。

特殊文字を使った置換

正規表現にはグループ化の概念も存在し、対象を$1、$2と文字列に置き換えることが可能です。サンプルコードは以下です。

var name= 'Nobi Nobita';
var result = name.replace( /(\w+)\s(\w+)/, '$2 $1' );
console.log( result );

上記のソースコードを実行してコンソール出力すると、以下のようになります。

Nobita Nobi

Nobiが$1、Nobitaが$2に代入されたのですが、変数に入れる段階では番号順になります。つまり、$2 $1と逆に記述すれば苗字と名前がひっくり返ります。また、特殊文字を使用して特定の文字列を抽出したり置き換えることも可能です。

var text = 'a, div, p';
var result = text.replace( /(a|p|div)/g, '<$&>' );
console.log( result );

上記のソースコードを実行すると以下のように出力されます。

<a>, <div>, <p>

まず「$&」は一致する文字列を抽出するためのコードです。そして「<>」で囲っているため、<>に囲った状態で出力されました。

第二引数に関数を指定する

最後に応用的な用法になりますが、replaceの第二引数に関数を指定したロジックを紹介します。サンプルコードは以下です。

var name= 'NOBI, NobiTA';
// 大文字の英語すべてに関数「toLower」を実行する
var result = name.replace( /[A-Z]/g, toLower );
// 関数の作成
function toLower( s ) {
　　　　// 取得した対象文字「s」を小文字にする
　　　　return s.toLowerCase();
}
console.log( result );