Replace String Characters in JavaScript

Share this article

There are two ways of looking at this one:
  1. Replace characters in a string INSIDE THE JAVASCRIPT CODE
  2. Replace characters in a string INSIDE THE HTML OF THE WEB PAGE

Replace String Inside JavaScript Code

str = str.replace("find","replace")

Replace String Inside HTML of Web Page

Using jquery

var value = $("#text").val()+"";
value.replace(".", ":");
var val = $("#text").val();
$("#text").val(val.replace('.', ':'));

Using JavaScript

var elmOperator = $("#" + elm.attr('id').replace('Include', 'Operator'));
var elmOperator = $("#" + elm.id.replace('Include', 'Operator'));

Alternative Methods

.replaceWith( newContent )

Using jquery

$('.third').replaceWith($('.first'));

Using JavaScript

v var str="Visit BLOGOOLA!";
document.write(str.replace("BLOGOOLA", "JQUERY4U"));

Replace values in form select options

//For <select multiple="multiple"> elements
$('input:text.items').val(function(index, value) {
 return value + ' ' + this.className;

Replace foriegn characters in HTML

var temp = new String('This fori<gn chars test st>ring... So?????');
document.write(temp + '<br/>');
temp =  temp.replace(/[^a-zA-Z 0-9]+/g,'');
document.write(temp + '<br/>');
Source: http://api.jquery.com/replaceWith/

Frequently Asked Questions (FAQs) about Replacing String Characters in JavaScript

How can I replace all occurrences of a string in JavaScript?

In JavaScript, the replace() method is used to replace a specified value with another value in a string. However, it only replaces the first occurrence of the specified value. To replace all occurrences, you can use a regular expression with a ‘g’ flag (global match):

let str = "Hello, World! World is beautiful!";
let newStr = str.replace(/World/g, "Earth");
console.log(newStr); // "Hello, Earth! Earth is beautiful!"
In the above code, all occurrences of “World” are replaced with “Earth”.

Can I use the replace() method to change a character at a specific index?

The replace() method in JavaScript doesn’t directly support replacing a character at a specific index. However, you can achieve this by splitting the string into an array of characters, replacing the character at the desired index, and then joining the array back into a string:

let str = "Hello, World!";
str = str.split('');
str[7] = 'E';
str = str.join('');
console.log(str); // "Hello, Eorld!"
In the above code, the character at index 7 (“W”) is replaced with “E”.

How can I use the replace() method with a function?

The replace() method in JavaScript can accept a function as its second argument. This function is invoked after the match has been performed, and its return value is used as the replacement string. The function’s arguments represent the match(es) found:

let str = "Hello, World!";
let newStr = str.replace(/World/, function(match) {
return match.toUpperCase();
});
console.log(newStr); // "Hello, WORLD!"
In the above code, the matched string “World” is converted to uppercase.

Can I use the replace() method to remove characters from a string?

Yes, you can use the replace() method to remove characters from a string by replacing them with an empty string:

let str = "Hello, World!";
let newStr = str.replace(/World/, '');
console.log(newStr); // "Hello, !"
In the above code, “World” is removed from the string.

How can I replace multiple different strings at once?

To replace multiple different strings at once, you can chain replace() methods:

let str = "Hello, World! World is beautiful!";
let newStr = str.replace(/Hello/g, "Hi").replace(/World/g, "Earth");
console.log(newStr); // "Hi, Earth! Earth is beautiful!"
In the above code, both “Hello” and “World” are replaced with “Hi” and “Earth” respectively.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

javascript replace charsjavascript replace in codejavascript string replace codejavascript var string replace charsjQueryjs replace string
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week