JavaScriptのreplace関数を使って文字列の置換をしてみよう

文字列を置換するための関数は多くのプログラミング言語に標準で用意されています。JavaScriptで文字列を置き換えるにはどうすれば良いでしょうか？

まず、JavaScriptのreplace関数について解説します。その後、正規表現での置換など様々な置換の方法を実際のサンプルコードで解説します。JavaScriptのreplace関数を活用して文字列の置換を行ってみましょう。

JavaScriptの文字列置換関数：replace

文字列を扱うプログラムを作成していると必ずと言っていいほど、文字列の中にある特定のワードを別のワードに置き換えたい、という場面があります。そんな時、役に立つのがJavaScriptのreplace関数です。

では、replace関数の仕様と書き方を見ていきましょう！

replace関数とは

replace関数を用いると、ある文字列の中にある指定したワードを、別のワードに置換することができます。

例えば、全角と半角で記載された電話番号を、全部半角に統一して、画面上で表示したい場合、replace関数を使って、全角数字と全角ハイフンを半角に置き換えることができます。

replace関数の使い方

replace関数の書式は次のとおりです。

(文字列の変数).replace((置換対象文字列),(置換文字列))

置換された文字列が、replace関数の戻り値として返ります。

では実際のコードを書いてみましょう。先ほどの全角と半角で記載された電話番号を置き換えたい場合は、次のコードとなります。

サンプルコード

var mytelno='０１２０－345-678';
mytelno= mytelno.replace('０１２０','0120');
mytelno= mytelno.replace('－','-');
console.log (mytelno)

実行結果

0120-345-678

数字とハイフンが、全て半角になりすっきりしました。

このreplace関数ですが、複数の文字列を一括して置換することができません。つまり、最初に一致した指定文字列だけが置換され、プログラムが終了します。

文字列中の特定の文字列を全て置換したい場合、正規表現とフラグを活用して、文字列を置き換えます。

正規表現を用いたreplace関数の使い方

replace関数における正規表現では、検索する文字列を『/（スラッシュ）』で囲み、末尾にフラグを付与します。
オプションのフラグを幾つかを列挙します。

では具体例として、フラグ 「g」を用いて、複数の電話番号の大文字数字を置き換えてみましょう。

サンプルコード

//半角・全角が混ざった電話番号
var mytelno = '０１２０－345-678, 0120－３４５-678, ０１20－34５-67８';

//第一引数：正規表現で全角数字と全角ハイフンを抽出
//第二引数：関数を指定し、関数内で文字コードをシフト(全角から半角へ)
mytelno = mytelno.replace(/[０-９]|[－]/g,
    function( tmpStr ) {
        return String.fromCharCode( tmpStr.charCodeAt(0) - 0xFEE0 );
    }
);
 
//結果を出力
console.log (mytelno);

実行結果

0120-345-678, 0120-345-678, 0120-345-678

数値全角を数値半角に、全角ハイフンを半角ハイフンに置き換えるサンプルコードです。注目していただきたいのは、正規表現の置換ルールのフラグ 「g」が用いられていることです。このフラグ「g」を用いることで、複数出てくる任意文字列全てを一括で置き換えることができます。

replace関数の第二引数には関数を指定することもできます。
この例では第二引数で関数を指定しており、関数内で文字コードを全角から半角へ変換しています。

JavaScriptの文字コードであるUnicodeの次の特性を活用し、全角から半角に変換します。

全角英数字の文字コードから「0xFEE0」を引くと半角英数字の文字コードになります。

charCodeAtメソッドで、与えられたインデックスに位置する文字の UTF-16 コードを取得します。取得したコードから「0xFEE0」を引きます。fromCharCodeメソッドで、指定された UTF-16 コードの文字列を返します。これで、全角から半角へ変換します。

Unicodeについては下記のページを参照してください。

http://www.unicode.org/

正規表現に複数のフラグを使う

正規表現に付けるフラグは複数組み合わせて使うこともできます。
例えばグローバルマッチのフラグ「g」と大文字と小文字の違いを無視するフラグ「i」を同時に使用してみます。

下記の例はiフラグを使用しない場合と使用した場合のサンプルです。

//例１：フラグ「i」を使用しない場合
var sample = 'Abc abc defg';
sample = sample.replace(/abc/g, 'AAA');

console.log(sample); // 出力結果：Abc AAA defg

//例２：フラグ「i」を使用した場合
var sample2 = 'Abc abc defg';
sample2 = sample2.replace(/abc/gi, 'AAA');

console.log(sample2); // 出力結果：AAA AAA defg

replace関数はデフォルトで大文字と小文字の違いを区別するため、iフラグ無しの場合は「abc」にしかマッチしていません。
フラグ「i」をつけると大文字と小文字の違いを無視したマッチングが行われるため、「Abc」にもマッチしています。
同時に使用したgフラグのグローバルマッチも有効になっています。

このように複数のフラグを組み合わせて使うことで活用の幅を広げることができます。

replace関数を使った様々な置換の方法

JavaScriptのreplace関数の基本を押さえたところで、実際の業務に役立つ様々な置換の方法を解説していきます。

改行コードをHTMLの<br>に変換する

JavaScriptのコードを書いている時によく遭遇するのが、文字列の改行コードの置換です。

ブラウザーのテキストボックスに入力したとおり、改行コードも含めて、ブラウザー上に表示したいという要望を受けることがあります。正規表現を使うことで、複数の改行コードをHTMLの<br>に置き換えることができます。

サンプルコード

var sample='奇想天外\n一石二鳥\n一朝一夕'
sample=sample.replace(/\n/g,'<br>')
console.log (sample)

実行結果

奇想天外<br>
一石二鳥<br>
一朝一夕

正規表現「\n」と記述することで、改行コードを指定します。gフラグオプションで、全ての改行コードを置き換えます。

管理コードを任意のコードに置換える

特定の管理コードパターンのうち、幾つかの文字列をアスタリスク（*）でマスク表示したいという要望があった場合、正規表現を用いて、特定の数値パターン（例えば５桁の数値）を一括で置き換えることができます。

サンプルコード

var sample='01-12345-001, 02-67890-001, 03-24680-001, 04-13579-001'
sample=sample.replace(/\d{5}?/g,'*****')
console.log (sample)

実行結果

01-*****-001, 02-*****-001, 03-*****-001, 04-*****-001

正規表現「\d{5}?」と記述することで、５桁の数字を指定することができ、gフラグオプションで、全ての５桁数字を置き換えます。

全角空白・半角空白を削除する

次に、文字列の中の不要な空白を削除する方法を示します。

サンプルコード

var sample='吾　輩 は　　　　　猫　で　ある　　　';
sample=sample.replace(/\s+/g,'')
console.log (sample)

実行結果

吾輩は猫である

正規表現「\s+」と記述することで、文書中の全角空白・半角空白を指定することができ、gフラグオプションで、全ての全角空白・半角空白を空文字に置き換えます。

数値を金額表記に変換する

最後に、データベース等から取得した数値を表示するにあたって、３桁でカンマ区切りにし、金額表記したいという要望を受けることもあるでしょう。この要望も、replace関数と正規表現で対応できます。

サンプルコード

var price='1234567890';
price=price.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
console.log (price)

実行結果

1,234,567,890

正規表現「(\d)(?=(\d{3})+(?!\d))」と記述することで、数値を３桁で区切りつつ、「$1」という変数に代入し置き換えます。第二引数の指定が「$1,」となっており、カンマが挿入されています。これにより「３桁のカンマ区切り」を実現しています。

まとめ

いかがでしたか？JavaScriptのreplace関数、意外と簡単だったのではないでしょうか？

今回は、JavaScriptで文字列を操作する際に役立つ文字列関数「replace」を解説しました。正規表現を用いて実用すること痒いところまで手がとどきます。

実践でreplace関数を使いこなし、文字列の置換を効率よく行いましょう！

この記事のキーワードに関する勉強会・イベントを探す

TECH PLAYでは、ITエンジニア向けの勉強会・イベント情報を提供しています。

興味のある方はぜひご参加ください。

• 「JavaScript」に関する勉強会・イベントを探す
• 「プログラミング」に関する勉強会・イベントを探す
• 「初心者」に関する勉強会・イベントを探す