.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です。
