ES2021最新機能：replaceAll()で文字列を簡単全置換！完全ガイドと実用例｜DAD UNION

今回は、JavaScriptのES2021に導入された新しい機能、replaceAll()メソッドについてご紹介します。これまでのreplace()メソッドは、文字列内の最初に一致した部分のみを置換する機能しかありませんでした。しかし、replaceAll()の登場により、これが一層便利になりました。

Contents

replaceAll()の基本的な使い方
- シンプルな例
- 実用的な例
replaceAll()を使ったデモページの作成
まとめ

replaceAll()の基本的な使い方

replaceAll()メソッドは、文字列内に存在する特定の部分をすべて新しい文字列に置換します。これは、特に長いテキストを扱う際に非常に有効です。

シンプルな例

例えば、「エンジニア」という単語を「プログラマー」に置換したい場合、次のように書きます。

let text = "私はエンジニアです。エンジニアとして働いています。";
text = text.replaceAll("エンジニア", "プログラマー");
console.log(text); // "私はプログラマーです。プログラマーとして働いています。"

実用的な例

ウェブページでユーザーが入力した文字列内の特定の単語を、別の単語に置換する場合にも役立ちます。例えば、ユーザーが入力した文章内のすべての「悲しい」を「楽しい」に置換したい場合、以下のようなコードが考えられます。

document.getElementById("replaceButton").addEventListener("click", function() {
  let userText = document.getElementById("userInput").value;
  let modifiedText = userText.replaceAll("悲しい", "楽しい");
  document.getElementById("result").innerText = modifiedText;
});

replaceAll()を使ったデモページの作成

ウェブページで実際にreplaceAll()を使ったデモを見てみましょう。以下に、HTML、CSS、JavaScriptのコードを示します。この例では、ページに表示された文章内の「エンジニア」を「プログラマー」に置換します。

HTMLの記述

まず、置換前と置換後の文章を表示するためのHTML構造を作成します。
置換前文字列（class=”strbefore”）要素から指定の文字列全てを置換し置換後文字列（class=”strafter”）要素に出力します。

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

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

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

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>

JavaScriptの記述

最後に、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>