How to replace character inside a string in JavaScript

Javascript replace character in a string at index or with regular expression using the string replace() function which is used to replace the first occurrence of value in a string. To use the same function to replace all the instances of a character, you can use a regular expression with the (g) flag or modifier set.

The syntax is string.replace(searchValue, newValue) The first parameter ‘searchValue’ is required and it’s the value, character or regular expression to search for in the string. So if you have the sentence ‘Javascript programming tutorials’ and you pass in ‘programming’ as the first argument of the replace() function, then that will be the text to be searched for in the string.

The second paramerter of the replace() method is also required and it’s the new value to replace the occurrence of the first parameter in a string. Example, you can replace the ‘many’ word with ‘5’ in this text ‘there are many Javascript string methods’ by doing string.replace(‘many’,’5’). The function does not change the original string, it rather returns a new string with a replacement of the specified value(s) passed into it as an arguments.

What to note about the string replace() method:

The replace() method searches a particular string for a value/character or a regular expression and replace a single or all instances of the value.
The replace() method returns a new string with replacement of the value(s) passed as an arguments.
The replace() method does not modify or change the origin string.

How to replace() character inside a string in JavaScript with replace() method?

First let see how you can replace the first occurrence or instance of a value or regex in a string.

let text = "I love web development with javascript";
// search for the first instance of the world ‘javascript’ and replace it with ‘python’
let newText = text.replace("javascript ", "python");
Console.log(text);
console.log(newText);

Output:

I love web development with javascript
I love web development with python

The method will search through all the characters/values in the string, starting from the left/beginning and look for the first instance of the world ‘javascript’ and replace it with ‘python’. And if you look at the code output above, you can see that it did not change the original string value.

NB: If the string has the same occurrence of a word, the “replace()” function will only have effect on the first instance of the word. Use a regular expression with the (g) flag/modifier set if you want to replace all occurrences of word. Also, replace() support all browsers either, Mozilla Firefox, Edge, Internet explorer, Safari, Opera or Chrome because it’s an ECMAScript1 (ES1) feature.

Another example to replace all underscores with hyphens.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Example to Replace Character in a String</title>
<script>
    function strReplace(){
        var myStr = 'The_new_web_development_library';
        var newStr = myStr.replace(/_/g, "-");
        
        // Insert modified string in paragraph
        document.getElementById("thetext").innerHTML = newStr;
    }
</script>
</head>
<body>
    <p id="thetext">The_new_web_development_library</p>
    <button type="button" onclick="strReplace();">Replace</button>
</body>
</html>