Have you ever been in a situation where you had a string of text and wanted to replace all of its occurrences with something else? It is often a challenge for beginners, especially in JavaScript. Whether you are developing an application, working on a website or writing a script, here are five simple ways you can replace all string occurrences in JavaScript. Each method has its own set of use cases and benefits. No matter the situation, you'll be sure to find the right approach for your project. I will show you how to use the built-in methods from the String object and from external libraries like , apart from more creative methods like using Regular Expressions. lodash So without further ado, let's get started on replacing all string occurrences in . JavaScript Using the Method String.prototype.replace() Do you often find yourself needing to replace all occurrences of a word or phrase in a string? Then you've come to the right place. JavaScript has multiple methods for replacing strings, one of which is the method. String.prototype.replace() This method has two compulsory parameters—the substring which needs to be replaced, and what it needs to be replaced with—and two optional ones—one that limits the number of replacement occurrences and another that captures matches into an array. Let's look at an example: You can use this method to replace all instances of "cat" in the sentence "I like cats" with "dog": const newSentence = 'I like cats'.replace('cat', 'dog');
console.log(newSentence) // Output: I like dogs If you want to replace more than one word in a sentence, then simply add them both into the first parameter with a regular expression, like so: const newSentence = 'I like cats'.replace(/cat|cats/, 'dog');
console.log(newSentence) // Output: I like dog Using the with a function String.prototype.replace() One simple and straightforward way to replace all string occurrences in JavaScript is to use the call. This method takes in two parameters, a target substring (the string you want to find and replace) and the replacement string (which is what you want the target substring to be replaced with). String.prototype.replace() In some cases, you may also need to pass in a function as the second parameter instead of a simple string. This is useful for cases where the replacement string needs to be “dynamic” or dependent on the context of the target substring. For example, let's say you were writing a program that had a lot of references to outdated APIs that needed updating. Instead of changing each reference by hand, you could use with a function that would check each reference against an API list and update it accordingly. String.prototype.replace() The syntax looks something like this: . stringVar.replace(targetSubstring,(substring) => {return //your code here}, ) As you can see, this is an incredibly powerful way to replace all string occurrences in JavaScript with relative ease! Using the String.prototype.replaceAll() When it comes to making such replacement, the method is one of the simplest and most efficient way to do it. String.prototype.replaceAll() It's a handy tool for searching and replacing a sub-string or character patterns in a larger string. Using this method, you can easily replace all occurrences of a character or string within a larger one. Here's an example of how to use : String.prototype.replaceAll() let str = 'My name is John.';
// Replacement using replaceAll() method
str = str.replaceAll('John', 'Alice');
// Prints 'My name is Alice.'
console.log(str); So all you need to do is pass two parameters in the function — the sub-string you want to replace in the original string and the replacement sub-string (which can be another word, character or phrase). The replaces all occurrences of “John” with “Alice”, so that ‘My name is John’ gets replaced with ‘My name is Alice’! replaceAll() Using the JavaScript's Regular Expression Syntax When the pattern you want to match is a bit more complex, you might want to consider using the JavaScript's Regular Expression syntax. This is incredibly powerful and it can help you to easily replace all occurrences of a certain string in one go. Let's take a look at how it works. You can use the String method with a regular expression specified as its first argument. This regular expression uses what are called , denoted by parentheses , which allow you to match multiple strings and then access them individually later on. replace() capturing groups ( ) The second argument of will be the replacement string, which will use the captured strings from the regular expression — in this case we'll be using the and syntax for access them. replace() $1 $2 So let's say that you wanted to replace all occurrences of 'JavaScript' in some text with 'ECMAScript', then your code would look like this: str = str.replace(/javascript/i, 'ECMAScript'); Here, we've used as our pattern - notice the forward slashes (/) at either end - which means that we're matching any instance of 'JavaScript', regardless of its case (the i flag denotes that). /javascript/i In our replacement string we've used ‘ECMAScript’ so that it replaces any occurrences of ‘JavaScript’ wherever it appears in our text. Using String.prototype.split() and Array.prototype.join() The fifth option for replacing all string occurrences is to use the and methods: String.prototype.split() Array.prototype.join() let str = 'hello world';
let newStr = str.split('o').join('O');
console.log(newStr); // hellO wOrld The method will create an array, and the method will join all elements in the array with a chosen character or string. split() join() The string passed into the method is a delimiter, which specifies how many pieces or segments to split a string into. split() It works by scanning through each element of the array, and when it finds a character (or characters) that match the one specified in the , it divides that array into separate elements based on these characters, then removes them from the string altogether. split() The output created by using this method can easily be used to chain other methods as well, allowing you to do more creative things with your strings: let str = 'Hello World';
let newStr = str.split('l').join('').toUpperCase();
console.log(newStr); // HEO WORD Conclusion In conclusion, when it comes to replacing strings in JavaScript, there are a few different approaches you can take. Whether you are looking for a straightforward solution to a simple task, or a more complex regex problem—you have the ability to build a robust program that can handle any string replacement logic you need. With these five simple ways to replace all string occurrences in JavaScript, you can now confidently tackle any string replacement task that comes your way. So get out there and start coding! Read More Data Binding in React join() - MDN Polymorphism in JavaScript Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

12 Websites to Take Your CSS Skills From Beginner to Pro

Advanced JavaScript Tutorial: How to Reload a Page with Location.reload(true)

Proof of Work - Portfolio

Read My Stories

Buy Me a Coffee

Portfolio

Too Long; Didn't Read

Make resilience your competitive advantage

5 Simple Ways to Replace All String Occurrences in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Microservices for Humans: A No-Nonsense Introduction

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

Microservices for Humans: A No-Nonsense Introduction

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps