【簡単】JavaScriptを使って任意の文字列を置換する方法

JavaScriptを使ってテキスト内特定の文字列を置換したい。

置換したい同じ文字列が複数あり、一括ですべて置換したい。

本記事ではreplaceメソッドを使ってこのような悩みを解決します。

replaceメソッドで特定の文字列を置換

var tel = '090-0000-0000';
var value = tel.replace('-', '<span>-</span>');
console.log(value);

上記コードはreplaceメソッドを使って置換した例です。

携帯番号の文字列が入ってるtel変数内の【-】をspanタグで囲む【<span>-</span>】に置換し、value変数に格納するコードです。

replaceメソッドは以下のようにコードを記述すると特定の文字列を置換してくれます。

置換したい文字列が入ってる変数.replace('置換したい文字列', '置換後の文字列');

しかしコンソールで確認すると以下のように最初の特定の文字列しか置き換わってません。

090<span>-</span>0000-0000

すべて置き換えたい場合は次の通りです。

var tel = '090-0000-0000';
var value = tel.replace(/-/g, '<span>-</span>');
console.log(value);

置換したい文字列が複数ある場合は上記のように正規表現（/置換したい文字列/g）を使うと特定の文字列をすべて置換できます。

以上の方法でJavaScriptを使って置換が可能です。

replaceメソッドは文字列だけでなくhtmlコードも新たに挿入できるので、挿入したhtmlタグにCSSで装飾するといった使い方もできます。

ぜひ参考にしてみてください。

以上で解説を終わります。