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 do I replace a character at a particular index in JavaScript?
JavaScript strings are immutable, meaning you can't directly replace a character at a specific index like in other languages. However, we can use several approaches to create a new string with the character replaced at the desired position.
In this tutorial, we'll explore two effective methods to replace a character at a particular index in a JavaScript string.
Replace Character by Converting String to Array
Using String Slicing with substring()
Replace Character by Converting String to Array
This method converts the string to an array, modifies the character at the target index, and then joins the array back into a string.
Syntax
let charArray = [...string]; // convert string to array
charArray[index] = newCharacter; // replace character
string = charArray.join(''); // join array back to string
Parameters
index ? The position where you want to replace the character (0-based indexing)
newCharacter ? The character to replace with
Example
Here's how to replace characters using both the spread operator and split() method:
<html>
<head>
<title>Replace Character at Index</title>
</head>
<body>
<h2>Replace a character at a particular index</h2>
<h4>Original string: "TutorialsPoint"</h4>
<div id="original"></div>
<h4>After replacing with 'a' at index 2:</h4>
<div id="result1"></div>
<h4>After replacing with 'w' at index 4:</h4>
<div id="result2"></div>
<script>
let string = "TutorialsPoint";
document.getElementById("original").innerHTML = string;
// Method 1: Using spread operator
let charArray = [...string];
charArray[2] = 'a';
let result1 = charArray.join('');
document.getElementById("result1").innerHTML = result1;
// Method 2: Using split method
charArray = string.split('');
charArray[4] = 'w';
let result2 = charArray.join('');
document.getElementById("result2").innerHTML = result2;
</script>
</body>
</html>
TutorialsPoint TuaorialsPoint TutowalsPoint
Using String Slicing with substring()
This method splits the string into parts before and after the target index, then concatenates them with the new character in between.
Syntax
let newString = string.substring(0, index) + newCharacter + string.substring(index + 1);
Algorithm
Step 1 ? Extract the substring before the target index
Step 2 ? Extract the substring after the target index
Step 3 ? Concatenate: before + newCharacter + after
Example
Here's how to replace a character using string slicing:
<html>
<head>
<title>Replace Character Using Substring</title>
</head>
<body>
<h2>Replace character using substring method</h2>
<h4>Original: "Hello World"</h4>
<div id="original"></div>
<h4>After replacing 'x' at index 3:</h4>
<div id="result"></div>
<script>
let string = "Hello World";
document.getElementById("original").innerHTML = string;
// Replace character at index 3 with 'x'
let index = 3;
let newChar = 'x';
let newString = string.substring(0, index) + newChar + string.substring(index + 1);
document.getElementById("result").innerHTML = newString;
</script>
</body>
</html>
Hello World Helxo World
Comparison
| Method | Performance | Readability | Use Case |
|---|---|---|---|
| Array Conversion | Good for multiple replacements | Clear and intuitive | Multiple character replacements |
| String Slicing | Efficient for single replacement | Concise one-liner | Single character replacement |
Conclusion
Both methods effectively replace characters in JavaScript strings. Use array conversion for multiple replacements and string slicing for single character replacements. Choose based on your specific needs and performance requirements.
2K+ Views
