JavaScriptのreplaceメソッドを使って様々な置換を試してみよう

JavaScriptのreplaceメソッドを使って様々な置換を試してみよう
公開
改行コードを一括でHTMLの<br>に置き換えたい、よくある要望です。JavaScriptで文字列を置換するにはどうすれば良いでしょうか?JavaScriptの置換に関連する関数を使いこなすことで、文字列を容易に操作することができます。何かと役に立つJavaScriptのreplaceメソッド、様々な置換の方法を解説します!

様々なプログラミング言語において、文字列を操作する関数が用意されています。JavaScriptで文字列を置換えるにはどうすれば良いでしょうか?
まず、JavaScriptのreplaceメソッドについて解説します。その後、正規表現での置換など様々な置換の方法を実際のサンプルコードで解説します。JavaScriptのreplaceメソッドを使ってみましょう!

JavaScriptの文字列置換関数:replace

文字列を扱うプログラムを作成していると、必ずと言っていいほど、文字列の中にある特定のキーワードを別のキーワードに置き換えたい、という要望に遭遇します。そんな時、役に立つのが、JavaScriptのreplaceメソッドです。
では、replaceメソッドの仕様と書き方を見ていきましょう!

replaceメソッドとは

replaceメソッドを用いると、ある文字列の中にある指定したキーワードを、別のキーワードに置換することができます。
例えば、全角と半角で記載された電話番号を、全部半角に統一して、画面上で表示したい場合、replaceメソッドを使って、全角数字と全角ハイフンを半角に置き換えることができます。

replace関数の使い方

replaceメソッドの書式は次のとおりです。

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

置換された文字列が、replaceメソッドの戻り値として返ります。

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

サンプルコード

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

実行結果

0120-345-678

数字とハイフンが、全て半角になりすっきりしました。
このreplaceメソッドですが、複数の文字列を一括して置換することができません。つまり、最初に一致した指定文字列だけが置換され、プログラムが終了します。
文字列中の特定の文字列を全て置換したい場合、正規表現を活用して、文字列を置き換えます。

正規表現を用いたreplaceメソッドの使い方

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

フラグ フラグの意味合い
g グローバルマッチ
i 大文字と小文字の違いを無視する
m 複数行を越えたマッチ

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

サンプルコード

//半角・全角が混ざった電話番号
var mytelno = '0120-345-678, 0120-345-678, 0120-345-678';

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

//結果を出力
console.log (mytelno);

実行結果

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

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

第二引数で関数を指定しており、関数内で文字コードを全角から半角へシフトしています。
JavaScriptの文字コードであるUnicodeの次の特性を活用し、全角から半角に変換します。

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

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

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

http://www.unicode.org/

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フラグオプションで、全ての改行コードを置き換えます。

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

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

サンプルコード

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}?」と記述することで、5桁の数字を指定することができ、gフラグオプションで、全ての5桁数字を置き換えます。

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

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

サンプルコード

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

実行結果

吾輩は猫である

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

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

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

サンプルコード

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

実行結果

1,234,567,890

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

まとめ

いかがでしたか?JavaScriptのreplaceメソッド、意外と簡単だったのではないでしょうか?

今回は、JavaScriptで文字列を操作する際に役立つ文字列関数「replace」を解説しました。正規表現を用いて実用すること痒いところまで手がとどきます。
実践でreplaceメソッドを使いこなし、文字列の置換を効率よく行いましょう!

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

TECH PLAYでは、ITエンジニア向けの勉強会・イベント情報を提供しています。
興味のある方はぜひご参加ください。


読んだコラムに関連するイベント

類似のコラム

タグからイベントをさがす