Written by Kasumi

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

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

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

目次

関連記事

JavaScript

JavaScriptで上下のスクロールを判定する方法

2022.10.15
2706
JavaScript

ローディング画面にパーセントとプログレスバーを表示する方法【progressbar.js】

2023.02.18
5264
JavaScript

JavaScriptで指定した条件に当てはまる配列要素があるか存在をチェック。true/falseで判定する方法

2023.01.05
840
JavaScript

【JavaScript】selectボックスで選択したoptionによってクラスを追加・削除する方法

2022.10.14
4190