Replace a Character at a specific Index in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 1, 2024
5 min

banner

# Table of Contents

  1. Replace a Character at a specific Index in a String in JavaScript
  2. Replace multiple characters at a specific Index in a String
  3. Only replacing a single character at a specific index in a String
  4. Replace a Character at a specific Index in a String using split()

# Replace a Character at a specific Index in a String in JavaScript

To replace a character at a specific index in a string:

  1. Use the String.slice() method to get the part before the character.
  2. Use the String.slice() method to get the part after the character.
  3. Use the addition (+) operator to add the replacement between the two parts.
index.js
function replaceCharacter(string, index, replacement) { return ( string.slice(0, index) + replacement + str.slice(index + replacement.length) ); } const str = 'bobby'; const result1 = replaceCharacter(str, 2, '_'); console.log(result1); // ๐Ÿ‘‰๏ธ bo_by const result2 = replaceCharacter(str, 2, '!@'); console.log(result2); // ๐Ÿ‘‰๏ธ bo!@y

replace character at specific index in string

The code for this article is available on GitHub

The String.slice() method extracts a section of a string and returns it, without modifying the original string.

The String.slice() method takes the following arguments:

NameDescription
start indexThe index of the first character to include in the returned substring
end indexThe index of the first character to exclude from the returned substring
The slice() method doesn't change the original string. The method returns a new string containing a part of the original string.
  1. The first call to the String.slice() method returned a part of the string before the character that is to be replaced.

  2. The second call to the method returned the part of the string after the character to be replaced.

index.js
const str = 'bobby'; const index = 2; const replacement = '_'; // ๐Ÿ‘‡๏ธ bo console.log(str.slice(0, index)); // ๐Ÿ‘‡๏ธ by console.log(str.slice(index + replacement.length));

In the example, we replace the character at index 2, which is a b with an underscore _.

Notice that we added the length of the replacement string to the index argument in the second call to the String.slice() method.

# Replace multiple characters at a specific Index in a String

This is useful when you need to replace multiple characters in the string.

index.js
function replaceCharacter(string, index, replacement) { return ( string.slice(0, index) + replacement + str.slice(index + replacement.length) ); } const str = 'bobby'; const index = 2; const replacement = '!@'; // ๐Ÿ‘‡๏ธ bo!@y console.log(replaceCharacter(str, index, replacement));

replace multiple characters at specific index in string

The code for this article is available on GitHub

The start index is inclusive, so we have to add at least 1 to the index of the character to be replaced.

# Only replacing a single character at a specific index in a String

If you only need to replace a single character in the string, you don't have to use the length of the replacement string, you can directly add 1 to the index.

index.js
function replaceCharacter(string, index, replacement) { return ( string.slice(0, index) + replacement + str.slice(index + 1) ); } const str = 'bobby'; const index = 2; const replacement = '_'; // ๐Ÿ‘‡๏ธ bo_by console.log(replaceCharacter(str, index, replacement));

only replacing single character at specific index

This approach also works if you need to replace a single character with multiple characters, starting at a specific index.

index.js
function replaceCharacter(string, index, replacement) { return string.slice(0, index) + replacement + str.slice(index + 1); } const str = 'bobby'; const index = 2; const replacement = '___'; // ๐Ÿ‘‡๏ธ bo___by console.log(replaceCharacter(str, index, replacement));

We replaced the character in the string at index 2 with multiple characters.

# Getting the index of a substring in a string

If you need to get the index of a substring in a string, use the String.indexOf() method.

index.js
const str = 'bobby'; console.log(str.indexOf('o')); // ๐Ÿ‘‰๏ธ 1 console.log(str.indexOf('bb')); // ๐Ÿ‘‰๏ธ 2

getting index of substring in string

The code for this article is available on GitHub

The String.indexOf() method returns the index of the first occurrence of a substring in a string.

If the substring is not contained in the string, the method returns -1.

# Using the length of the replacement string to determine the start index

If you need to replace multiple characters in the string with multiple characters, use the length of the replacement string to determine the first character of the second slice.

index.js
function replaceCharacter(string, index, replacement) { return ( string.substring(0, index) + replacement + str.substring(index + replacement.length) ); } const str = 'bobby'; const index = 2; const replacement = '%^@'; // ๐Ÿ‘‡๏ธ bo%^@ console.log(replaceCharacter(str, index, replacement));

using length of replacement string to determine start index

The start index n the second call of the String.substring() method is used by adding the index of the character to be replaced to the length of the replacement string.

This means that we are excluding exactly as many characters from the original string as we provide in our replacement string.

Alternatively, you can use the String.split() and Array.join() methods.

# Replace a Character at a specific Index in a String using split()

This is a three-step process:

  1. Use the String.split() method to split the string into an array of characters.
  2. Replace the character at the given index with the replacement character.
  3. Use the Array.join() method to join the array without a separator.
index.js
function replaceCharacter(string, index, replacement) { const arr = string.split(''); arr[index] = replacement; return arr.join(''); } // ๐Ÿ‘‡๏ธ _obby console.log(replaceCharacter('bobby', 0, '_')); // ๐Ÿ‘‡๏ธ b_bby console.log(replaceCharacter('bobby', 1, '_')); // ๐Ÿ‘‡๏ธ b!@bby console.log(replaceCharacter('bobby', 1, '!@'));
The code for this article is available on GitHub

We first used the String.split() method to split the string into an array.

index.js
const str = 'bobby'; const arr = str.split(''); console.log(arr); // ๐Ÿ‘‰๏ธ [ 'b', 'o', 'b', 'b', 'y' ]

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

The String.split() method takes the following 2 parameters:

NameDescription
separatorThe pattern describing where each split should occur.
limitAn integer used to specify a limit on the number of substrings to be included in the array.

The next step is to use bracket notation to replace the character at the specified index.

index.js
const str = 'bobby'; const arr = str.split(''); console.log(arr); // ๐Ÿ‘‰๏ธ [ 'b', 'o', 'b', 'b', 'y' ] arr[0] = '_'; console.log(arr); // ๐Ÿ‘‰๏ธ [ '_', 'o', 'b', 'b', 'y' ]

The last step is to use the Array.join() method to join the array's elements into a string without a separator.

index.js
const str = 'bobby'; const arr = str.split(''); console.log(arr); // ๐Ÿ‘‰๏ธ [ 'b', 'o', 'b', 'b', 'y' ] arr[0] = '_'; console.log(arr); // ๐Ÿ‘‰๏ธ [ '_', 'o', 'b', 'b', 'y' ] const result = arr.join(''); console.log(result); // ๐Ÿ‘‰๏ธ _obby

The Array.join() method concatenates all of the elements in an array using a separator.

The only argument the Array.join() method takes is a separator - the string used to separate the elements of the array.

If the separator argument is set to an empty string, the array elements are joined without any characters in between them.

This approach is suitable when you need to replace a single character in a string at a specific index with one or more characters.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev