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
172
JavaScript

JavaScriptでJSONデータを読み込み・HTMLへ出力する方法

2022.10.16
551
JavaScript

JavaScriptでHTMLの埋め込む場所を指定する方法

2022.10.17
168
JavaScript

JavaScriptでコンテンツの内側・外側をHTMLタグで囲う方法

2022.10.26
275