How To Replace Characters In A String In Javascript – Simple Examples

Welcome to a quick tutorial on how to replace characters in a string in Javascript. Need to check and replace certain characters in Javascript? There are actually a number of ways to do it:

  1. var replaced = STRING.replace("FROM", "TO");
  2. var replaced = STRING.replaceAll("FROM", "TO");
  3. var replaced = STRING.replace(/FROM/g, "TO");
  4. var replaced = theString.split("FROM").join("TO");

That covers the basics, but let us walk through detailed examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes String Replace Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

STRING REPLACE

All right, let us now get into the various ways to replace characters in a string now.

 

1) REPLACE

1-replace.js
// (A) THE STRING
var str = "A slow fox jumps over the cow, a fast fox leaps over the moon.";
console.log(str);
 
// (B) REPLACE - ONLY REPLACES THE FIRST INSTANCE
// A slow doge jumps over the cow, a fast fox leaps over the moon.
var replaced = str.replace("fox", "doge");
console.log(replaced);

This is probably one of the easiest ways to replace characters in a string, just use the replace(FROM, TO) function. But please take note that it will only replace the first instance.

 

2) REPLACE ALL

2-replace-all.js
// (A) THE STRING
var str = "A slow fox jumps over the cow, a fast fox leaps over the moon.";
console.log(str);
 
// (B) REPLACE - REPLACES ALL INSTANCES
// A slow doge jumps over the cow, a fast doge leaps over the moon.
var replaced = str.replaceAll("fox", "doge");
console.log(replaced);

If you want to replace all the instances in a string, use replaceAll(FROM, TO) instead. Also, take note that both replace() and replaceAll() are case-sensitive. That is, “fox” is different from “Fox”.

 

 

3) USING REGULAR EXPRESSION

3-regex.js
// (A) THE STRING
var str = "A slow fox jumps over the cow, a fast fox leaps over the moon.";
console.log(str);

// (B) REGULAR EXPRESSIONS
// (B1) REPLACE FIRST INSTANCE ONLY
// A slow doge jumps over the cow, a fast fox leaps over the moon.
var regA = str.replace(/fox/, "doge");
console.log(regA);

// (B2) REPLACE ALL INSTANCES
// A slow doge jumps over the cow, a fast doge leaps over the moon.
var regB = str.replace(/fox/g, "doge");
console.log(regB);

// (B3) CASE INSENSITIVE REPLACE ALL
// A slow doge jumps over the cow, a fast doge leaps over the moon.
var regC = str.replace(/FOX/gi, "doge");
console.log(regC);

So what if we need to do a case-insensitive search-and-replace? Introducing regular expressions… Which is that /FOX/gi part. Regular expressions are very powerful, and we can use them to pretty much define any search rules, but it is a big can of worms. So I am just going to keep it simple here:

  • Use /PATTERN/ to do an exact single match (case sensitive).
  • Use /PATTERN/i to do an exact single match (case insensitive).
  • Lastly, /PATTERN/g will match all instances.

 

4) SPLIT & JOIN

4-split-join.js
// (A) THE STRING
var str = "A slow fox jumps over the cow, a fast fox leaps over the moon.";
console.log(str);
 
// (B) SPLIT
var replaced = str.split("fox");
console.log(replaced);
 
// (C) REJOIN
replaced = replaced.join("doge");
console.log(replaced);

Yep, this is a funky method that I found online. Interesting, but very inefficient. Just don’t use this unless you are somehow forced to do so…

 

 

5) REPLACE MULTIPLE CHARACTERS

5-replace-many.html
// (A) THE STRING
var str = "A slow fox jumps over the cow, a fast fox leaps over the moon.";
console.log(str);

// (B) WORDS TO REPLACE
var from = ["fox", "leaps"];
var to = ["doge", "flies"];

// (C) REPLACE
// A slow doge jumps over the cow, a fast doge flies over the moon.
var replaced = str;
for (let i in from) {
  replaced = replaced.replaceAll(from[i], to[i]);
}
console.log(replaced);

Last example – If you need to replace many words, one easy way is to use arrays and simply loop through them.

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

SUMMARY

Function/Statement Description Reference Link
STRING.replace(FROM, TO) Replace the first instance of FROM in the string with TO. Click Here
STRING.replaceAll(FROM, TO) Replace all instances of FROM in the string with TO. Click Here
STRING.replace(/PATTERN/, TO) Replace instances matching the /PATTERN/ with TO. Click Here
STRING.split(SEPARATOR) Split the given string into an array, using SEPARATOR as the breaking point. Click Here
ARRAY.join(SEPARATOR) Join an array into a string, with elements separated with SEPARATOR. Click Here
encodeURI(STRING) Encode the string into URI characters. Click Here

 

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Replace Characters In String Using Javascript (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *