Quick Reach
The replace method
The replace method of Javascript is used to match and replace a value (regular expression or string) in a given string. The value can be a simple string or regex object (regular expression). The replace method returns a string which is the replaced string if a match is found.
In this JS replace tutorial we will show you examples of both string value and regex.
See a replace method example
Syntax of replace string method
Following is the general syntax of javascript replace string method:
Str.replace(“existing_substring” , string/regex);
Where
Str is a string variable.
existing_substring is a string in Str to be replaced.
String/regex can be a new string or regular expression that will replace existing substring.
Javascript string replace example
Following is a replace javascript method example with a string value. In this example, we simply created a string variable with a sentence “This is javascript string replace tutorial!”. Then we used replace method and replaced substring “javascript” to “JS”, that will be shown in an alert as you click the button.
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showalert()”>Show replace</button>
<script type=“text/javascript”>
function showalert(){
var str = (“This is javascript string replace tutorial!”);
var str_replaced = str.replace(“javascript”,“JS”);
alert (“The string after replace: n” + str_replaced);
}
</script>
</body>
</html>
|
As you can see the alert showing “This is JS string replace tutorial!” after using the replace javascript method.
Javascript string replace example with regex
Following is string replace example with a regular expression. In this example, we will use a simple regular expression without any modifier. Same string as in the above example is used.
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showalert()”>Show replace</button>
<script type=“text/javascript”>
function showalert(){
var str = (“This is javascript string replace tutorial!”);
var str_replaced = str.replace(/javascript/,”JS”);
alert (“The string after replace: n” + str_replaced);
}
</script>
</body>
</html>
|
As you can see, after clicking the button the alert shows replaced string, which is “This is JS string replace tutorial!”
Javascript replace all with global regex modifier
This is javascript replace all example. In above examples, with string or regex without modifier the replace method only changed first matched string. Suppose you have multiple occurrences of the string and you want to replace all with a given string. You can use global modifier in the replace method to replace all instances of matched string as follows:
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showalert()”>Show replace</button>
<script type=“text/javascript”>
function showalert(){
var str = (“This is javascript string replace tutorial! javascript”);
var str_replaced = str.replace(/javascript/g,“JS”);
alert (“The string after replace: n” + str_replaced);
}
</script>
</body>
</html>
|
You can see “javascript” is used twice in the given string (str). We used a regular expression with global modifier /javascript/g. This changed the original string (This is javascript string replace tutorial! javascript” to (This is JS string replace tutorial! JS). If you do not use /g, only the first occurrence of javascript will be replaced. So you can use a global modifier in the regex to replace all instances.
Javascript regex replace with case-insensitive modifier example
Following is a javascript regex replace example with the case-insensitive modifier. If you use regex in the replace method, it is case-sensitive. In order to use replace in javascript, with case-insensitive you can use regex modifier /i. See following example:
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showalert()”>Show JS replace</button>
<script type=“text/javascript”>
function showalert(){
var str = (“This is Javascript string replace tutorial!”);
var str_replaced = str.replace(/javascript/i,“JS”);
alert (“The string after replace: n” + str_replaced);
}
</script>
</body>
</html>
|
As you can see the given string is using Javascript (capital J). While in replace method we provided “javascript” with the small letter. It still replaced the string that we have given in regex, as we used /i modifier; that specifies to make it case insensitive.
Also see Javascript String | Javascript substring
Leave A Comment?