ES2021 Feature Highlight: The Complete Guide to replaceAll() for Easy String Replacement

In this article, we’ll explore the new `replaceAll()` method introduced in JavaScript ES2021. Previously, the `replace()` method only replaced the first occurrence of a matching substring. But with `replaceAll()`, things have become much more convenient.

Basic Usage of replaceAll()

The `replaceAll()` method replaces all instances of a specified substring in a string with a new one. It is particularly effective when working with long texts.

Simple Example

For example, if you want to replace the word “エンジニア” (Engineer) with “プログラマー” (Programmer), you can write:

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

Practical Example

It’s also useful when replacing specific words in user input on a web page. For example, to replace all instances of “悲しい” (sad) with “楽しい” (happy) in a sentence:

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

Creating a Demo Page Using replaceAll()

Let’s look at a demo page using `replaceAll()`. The following shows the HTML, CSS, and JavaScript code. In this example, the word “エンジニア” is replaced with “プログラマー” in a sentence displayed on the page.

HTML Markup

First, we set up the HTML structure to show the text before and after replacement. The original text (class=”strbefore”) will have its target string replaced and the result will be displayed in (class=”strafter”).

<h1>Replace all specified strings using replaceAll() method</h1>
<h2>Replacing "エンジニア" with "プログラマー" in the "Original Text".</h2>

<p>[Original Text]</p>
<div class="strbefore">ワンオペエンジニア歴は15年ほどですがエンジニアレベルとしては並です。</div>

<p>[Replaced Text]</p>
<div class="strafter"></div>

CSS Styling

Next, we style the page. CSS helps make the content more readable and visually appealing.

<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 Code

Lastly, we use JavaScript with the `replaceAll()` method to perform the string replacement. Although we load the `jquery-1.11.0.min.js` file, it’s used only for selecting text via jQuery’s `text()` method. The `replaceAll()` method itself does not require jQuery. The string in the `.strbefore` element will be replaced and output into `.strafter`.

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

Demo Page: Replace All Specified Strings Using replaceAll()

Demo page using replaceAll() method to replace all specified strings

Conclusion

The `replaceAll()` method is a powerful tool that makes string manipulation in JavaScript more flexible and efficient. It greatly simplifies dynamic content generation and handling user input on web pages. Be sure to try out this new feature!

　

* If you reuse this content, please do so at your own risk.
Do not reuse the Google Analytics tag within the head tag of the demo page.