【簡単】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で装飾するといった使い方もできます。

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

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

Ads

関連記事

JavaScript プログラミング

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

2019.12.01
109
JavaScript

【jQuery】デバイスによって条件分岐させる方法

更新日:2019.11.28
133
WordPress プログラミング

Advanced Custom Fields Pro(ACFPRO)を使いオプションページを作成する方法

2022.04.22
48
JavaScript プログラミング

複数設置に対応したタブ切り替えをjqueryで実装しよう

2020.10.20
281