Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use JavaScript to replace a portion of string with another value?
In this article, we are going to explore replacing a portion of a string with another value using JavaScript. We can replace string parts in multiple ways. Below are some common methods ?
replace() method
split() and join() methods
replaceAll() method
Let's discuss the above methods in detail.
Using replace() Method
The replace() method is an inbuilt JavaScript method that replaces the first occurrence of a substring or regular expression pattern with a new value. The original string remains unchanged.
Syntax
string.replace(searchValue, newValue)
Parameters
searchValue - The substring or regular expression to search for
newValue - The replacement string
Example
<html>
<head>
<title>String Replace Example</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<script>
let originalString = "Hi Tutorials Point";
let replacedString = originalString.replace("Hi", "Welcome To");
document.write("<h4>Original string: " + originalString + "</h4>");
document.write("<h4>Replaced string: " + replacedString + "</h4>");
</script>
</body>
</html>
Original string: Hi Tutorials Point Replaced string: Welcome To Tutorials Point
Using split() and join() Methods
We can use split() to break a string into an array at specified points, then join() to reassemble it with replacement text. This approach replaces all occurrences.
Syntax
string.split(separator).join(replacement)
Example
<html>
<head>
<title>Split and Join Example</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<script>
let originalString = "Start learning the latest technologies courses now. These technologies are popular.";
let replacedString = originalString.split("technologies").join("JavaScript");
document.write("<h4>Original string: " + originalString + "</h4>");
document.write("<h4>Replaced string: " + replacedString + "</h4>");
</script>
</body>
</html>
Original string: Start learning the latest technologies courses now. These technologies are popular. Replaced string: Start learning the latest JavaScript courses now. These JavaScript are popular.
Using replaceAll() Method
The replaceAll() method replaces all occurrences of a substring, unlike replace() which only replaces the first occurrence.
Example
<html>
<head>
<title>ReplaceAll Example</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<script>
let text = "Java is great. Java is powerful. Java is versatile.";
let replacedText = text.replaceAll("Java", "JavaScript");
document.write("<h4>Original: " + text + "</h4>");
document.write("<h4>Replaced: " + replacedText + "</h4>");
</script>
</body>
</html>
Original: Java is great. Java is powerful. Java is versatile. Replaced: JavaScript is great. JavaScript is powerful. JavaScript is versatile.
Comparison
| Method | Replaces | Best For |
|---|---|---|
replace() |
First occurrence only | Single replacements |
split().join() |
All occurrences | Simple text replacements |
replaceAll() |
All occurrences | Modern browsers (ES2021) |
Conclusion
Use replace() for single replacements, split().join() for all occurrences with broad compatibility, and replaceAll() for modern environments. Choose based on your replacement needs and browser support requirements.
966 Views
