.replace

JavaScriptの.replaceで文字列の置換

.replace メソッドで、指定した文字列を任意の文字列で置換します。

.replace

.replaceメソッドは、指定した文字列を検索し、見つかった文字列を別の文字列に置換します。

.replace("置換する文字列", "置換した後の文字列")

Excelに同じ「REPLACE」関数がありますが、「文字の位置」を基準に別の文字列に置き換えるのがExcelの関数なので、置換条件が少し異なります。

最初の文字列だけ対象なのが.replace

対象の文字列の中に一致するものが複数あった場合で、置換されるのは最初に見つかった文字列だけなのが、.replaceです。

.replaceを使ったサンプル

まずは、.replace メソッドを使ったサンプルです。

文字が置換される前の文字列

上記のボタンをクリックすると、上部の「文字が置換される前の文字列」の表示が「文字が置換された後の文字列」に置換されます。

このように、文字列を置き換えたい時に使えるメソッドです。

.replaceを使ったコード

このサンプルのHTMLを見てみましょう。

<p id="replaceconpo" class="deleteclass">文字が置換される前の文字列</p>
<button id="replaceBtn1">idが#replaceBtn1のボタン</button>

このように、HTMLでは div タグの中に p タグのみのシンプルな構成です。

そして、以下が .replace を使ったJavaScriptのコードです。

document.querySelector('#replaceBtn1').addEventListener('click', () => {
const strObj = document.getElementById("replaceconpo").innerHTML;
const result = strObj.replace("置換される前", "置換された結果");
document.getElementById("replaceconpo").innerHTML = result;
});

replaceBtn1 のidを持つボタンをクリックしたときに、.addEventListener で関数が発動し、strObj でreplaceconpo の文字列を取得します。

そして次に、取得した文字列を result で置換して出力します。

かかかず
かかかず

クリックで文字列を取得。そして置換して出力の順番で動くJavaScriptです。