.replace
メソッドで、指定した文字列を任意の文字列で置換します。
.replace
.replace
メソッドは、指定した文字列を検索し、見つかった文字列を別の文字列に置換します。
.replace("置換する文字列", "置換した後の文字列")
Excelに同じ「REPLACE」関数がありますが、「文字の位置」を基準に別の文字列に置き換えるのがExcelの関数なので、置換条件が少し異なります。
.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です。