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でマウスが要素をhoverしたか判定する方法

2022.11.10
3380
JavaScript

JavaScriptで配列を複製。新しい配列を作成する方法【mapメソッドを使おう】

2023.01.09
918
JavaScript

JavaScriptでHTML要素にCSSを追加する方法

2023.03.30
2476
JavaScript

JavaScriptでCSVファイルを読み込み!配列で取得する方法

2022.11.18
30877