replaceAll()メソッドを使って文字列内の指定文字列を全て置換する方法【ES2021】 DAD UNION

ES2021にリリースされたreplaceAll()メソッドを使って文字列内の指定文字列を全て置換する方法をご紹介します。
replace()メソッドは文字列内の初めの1文字だけしか置換できなかったのでちょっと不便でしたが、replaceAll()が使えることで便利になります。

Contents

指定文字列を全て置換した出力結果を表示するCSSの記述
replaceAll()メソッドを使って文字列内の指定文字列を全て置換するJavaScriptの記述
指定文字列を全て置換した出力結果を表示するHTMLの記述
replaceAll()メソッドを使って文字列内の指定文字列を全て置換するデモページ

指定文字列を全て置換した出力結果を表示するCSSの記述

※出力結果を表示するCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
  text-align: center;
  font-size: 16px;
}
h1,h2{
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 20px;
}
p{
  font-weight: bold;
  padding-top: 30px;
  font-size: 18px;
}
-->
</style>

replaceAll()メソッドを使って文字列内の指定文字列を全て置換するJavaScriptの記述

※jquery-1.11.0.min.jsファイルを読み込んでますが、jqueryのtext()を使って置換前の文字列を取得し、置換後の文字列を出力するために読み込んでます。replaceAll()メソッドはjqueryは必要ありません。置換前文字列（.strbefore）要素から指定の文字列全てを置換し置換後文字列（.strafter）要素に出力します。

<script src="./jquery-1.11.0.min.js"></script>
<script>
$(function() {
  var str = $('.strbefore').text();
  str = str.replaceAll("エンジニア", "プログラマー");
  $('.strafter').text(str)
});
</script>

指定文字列を全て置換した出力結果を表示するHTMLの記述

※置換前文字列（class=”strbefore”）要素から指定の文字列全てを置換し置換後文字列（class=”strafter”）要素に出力します。必要に応じて変更して下さい。

<h1>replaceAll()メソッドを使って文字列内の指定文字列を全て置換</h1>
<h2>「置換前文字列」内の文字「エンジニア」を「プログラマー」に置換します。</h2>

<p>【置換前文字列】</p>
<div class="strbefore">ワンオペエンジニア歴は15年ほどですがエンジニアレベルとしては並です。</div>

<p>【置換後文字列】</p>
<div class="strafter"></div>