JavaScript

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

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

replaceAll()メソッドを使って文字列内の指定文字列を全て置換するデモページ

replaceAll()メソッドを使って文字列内の指定文字列を全て置換するデモページ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。