How do I replace a character at a particular index in JavaScript?

Front End Technology Javascript Web Development

It is often required to update the string and replace the single character at a particular index while programming with JavaScript. JavaScript doesn’t contain the built-in method to replace the single character at the particular index in the string as the Java and C++, but we can use some other built-in methods and create custom logic to solve our problem.

In this tutorial, we have two methods to replace the character at a particular index in the string and update the string. One is by converting string to array, and another is using the substr() built-in method of JavaScript.

Replace Character by Converting String to Array
Using the substr() Method

Replace Character by Converting String to Array

In this method, we can use the different methods to convert the string to a character array in JavaScript. After that, users can update the string by accessing the index of the character array and replace the array element easily using the assignment operator.

After updating the array of characters, we will use the join() method to join the character array and make it a string.

Convert string to array

Before we move ahead, let’s look at how we can convert string to character array in short. The first way to convert the string to a character array is by using the split method. We will split the string by an empty ‘’ string which returns the character array. The second approach uses the spread operator with string and empty array.

Users can see the syntax for the above two methods to convert strings to character arrays.

let string = "tutorialsPoint";
let charArray = string.split(''); // convert string to array using split method.
let charArray = […string] // add string with spread operator to empty array

After converting string to array, users can follow the below syntax to replace character at the particular index.

Syntax

let charArray = [...string]; // convert string to array
charArray[ Index ] = 'a'; // replace character
string = charArray.join(''); // join the character array to make string

Parameters

Index − It should be in the range between the ( 0, string.length-1 ). It is the index of the string where we need to replace the character.

Example

In the example below, we have taken a string and converted it into the character array using two different methods, as discussed above. Next, we replaced the character in the array and used String.Join() method to join the array of characters and convert it to the string.

<html>
<head>
   <title>Example- replace a character at a particular index of string.</title>
</head>
<body>
   <h2>Replace a character at a particular index of string.</h2>
   <h4>After replacing with 'a' at 2nd index of "TutorialsPoint":</h4>
   <div id="result1"> </div>
   <h4> After replacing with 'w' at 4th index of "TutorialsPoint":</h4>
   <div id="result2"> </div>
   <script>
      let string = "tutorialsPoint";

      // using spread operator to convert string to array
      let charArray = [...string];
      charArray[2] = 'a';
      string = charArray.join('');
      document.getElementById("result1").innerHTML = string;

      // usign the split method to convert string to array.
      charArray = string.split("");
      charArray[4] = 'w';
      string = charArray.join('');
      document.getElementById("result2").innerHTML = string;
   </script>
</body>
</html>

In the above output, users can see that character at 2^nd and 4^th index is replaced. Make sure you count index starting from 0.

Using the substr() Method

In this method, we will use the substr() built-in method of JavaScript. The substr() method returns the substring from the full string.

Syntax

Users can follow the below syntax to use the substr() method.

let string = "hello";
let previous = string.substr(start_index,char_index);
let last = string.substr(char_index + 1, string.length);
string = previous + new_char + last;

Parameters

The substr() method takes two parameters--

start_index − It is the starting index of string, which will be always zero in our case.
char_index − It is the index of the char, where we need to replace the character in the string.
string.lenght − It represent the length of the string. Users doesn’t need to change it.
new_char − It is a character to be replaced.

Users can follow the below algorithm to replace the character at the particular index of the string.

Algorithm

Step 1 − Break the string into two parts.

Step 2 − One part contains the substring before the index where we need to replace the character, and another part contains the substring after the index where we need to replace the character.

Step 3 − Next, merge the previous part, followed by the character, and followed by the last part of the string.

Step 4 − For example, to replace the 3rd index of the “hello” string, the previous part will become “hel” and the last part will be “l”. When we merge it, it becomes ‘hel’ + new_char + ‘l’.

Example

In the below example, we have implemented the above algorithm to replace the character in the string using the substr() method.

<html>
<head>
   <title>Example - replace a character at a particular index of string.</title>
</head>
<body>
   <h2>Replace a character at a particular index of string.</h2>
   <h4> After replacing 'x' at 3rd index of "hello" using substr() method:</h4>
   <div id="result1"></div>
   <script>
      let string = "hello";
      let previous = string.substr(0, 3);
      let last = string.substr(4, string.length);
      string = previous + 'x' + last;
      document.getElementById("result1").innerHTML = string;
</script>
</body>
</html>

Conclusion

We have learned two approaches to replacing the character in the string by creating custom logic. Both approaches are pretty forward, and users can use any one according to their comfortability.