Using JavaScript to Replace a Character at an Index

In JavaScript, we can replace a character from a string at a specific index using the String substring() method. This is one of the easiest ways we have found to do this.

someString = someString.substring(0, index) + 'r' + someString.substring(index + 1);

Where index in the above code is the index of the character we want to replace, and ‘r’ is the new character we want to replace it with.

Let’s say we have the following JavaScript:

var someString = "We want to replace the character r in the word our with the character t.";
someString = someString.substring(0, 49) + 't' + someString.substring(49 + 1);

In the above code, someString will have the following value after applying the substring method to the original string:

Note that 49 is the index of character r in the word our. In this example, we just provided the index, but if we wanted to find it ourselves, we could have easily used the indexOf method to do that.

We can also replace a character at an index using the String slice() method.

var someString = "We want to replace the character r in the word our with the character t.";
someString = someString.slice(0, 49) + 't' + someString.slice(49 + 1);

This code will provide the same results as the substring method did above.

Let’s take a look at another simple example.

Using JavaScript to Replace a Character at an Index with a Click

In this simple example, we will have a really long string to start out. We will then provide an input field and a button to let the user remove a character from that string at a specific index.

Here is the HTML setup:

<div id="div1">
  <div id="updatedString"></div>
  <p>Provide the index of the character you want to replace:</p>
  <input type="number" id="index-position">
  <div id="click-me" onclick="replaceCharacter()">Replace character</div>
</div>

First, we will populate the div #updatedString with a long string we will make up.

We will then add an onclick event to our #click-me div that will run a function we will create called replaceCharacter(). In the function, we will get the index provided by the user in the input field using the value property.

Our function will then replace the character of the string at the index provided with the new character ‘z’ using the substring() method.

We will finally update the #updatedString div using the textContent property with the new string.

Here is the JavaScript code:

//Our string
var startingString = "This is a long string that we can remove the first character from as many times as we want by pressing the button below.";
  
//We will populate the div #updatedString with our string
document.getElementById("updatedString").textContent = startingString;

function replaceCharacter(){

  //We will get the user inputted index
  var userIndex = Number(document.getElementById("index-position").value);

  //We will next replace the character at the given index
  startingString = startingString.substring(0, userIndex) + 'z' + startingString.substring(userIndex + 1);

  //We will then update the div #updatedString with our new string
  document.getElementById("updatedString").textContent = startingString;

};

The final code and output for using JavaScript to replace a character at an index is below:

Code Output:

Full Code:

<div id="div1">
  <div id="updatedString"></div>
  <p>Provide the index of the character you want to replace:</p>
  <input type="number" id="index-position">
  <div id="click-me" onclick="replaceCharacter()">Replace character</div>
</div>

<script>

var startingString = "This is a long string that we can remove the first character from as many times as we want by pressing the button below.";
document.getElementById("updatedString").textContent = startingString;

function replaceCharacter(){
  var userIndex = Number(document.getElementById("index-position").value);
  startingString = startingString.substring(0, userIndex) + 'z' + startingString.substring(userIndex + 1);
  document.getElementById("updatedString").textContent = startingString;
};

</script>

Hopefully this article has been useful for you to learn how to use JavaScript to replace a character at an index.