How to insert a string at a specific index in JavaScript ? - GeeksforGeeks

25 Sep, 2019
Given a string containing words and the task is to insert a new string at a given index. There are two methods to solve this problem which are discussed below:
Method 1: Using the slice() method: The string is first divided into two parts by splitting it where the new string has to be inserted. The slice() method is used to return an array between two indices. It takes two parameters, one is the beginning index which specifies and the other is the ending index.The first part of the string is extracted using the starting position as 0 and the ending position as the index where the new string has to be inserted. The second part of the string is extracted using the starting position as index where the new string has to be inserted. The ending position is optional here and it will be assumed till the end of the string. The new string is added in between these two parts by simple string concatenation.
Example:
<!DOCTYPE html><html>  <head>    <title>        How to insert a string        at a specific index?    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        How to insert a string        at a specific index?    </b>          <p>The original string is: GeeksGeeks</p>          <p>        Click on the button to insert        'For' at the 5th index position    </p>          <p>        The new array is:         <span class="outputString"></span>    </p>      <button onclick="insertString()">        Insert element    </button>          <script type="text/javascript">                  function insertString() {            let origString = "GeeksGeeks";            let stringToAdd = "For";            let indexPosition = 5;              newString = origString.slice(0, indexPosition)                    + stringToAdd                    + origString.slice(indexPosition);              document.querySelector('.outputString').textContent                    = newString;        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Method 2: Using the splice() method: The split() method is used to split a string on the basis of a separator. This method can be used to split the string into individual letters by specifying a blank separator. This step is used to convert a string to an array as the next step requires it.The splice() method is used to insert or replace contents of an array at a specific index. This can be used to insert the new string at the position of the array. It takes 3 parameters, the index where the string is to be inserted, the number of deletions to be performed if any, and the string to be inserted.The required index and the string is passed as parameters to this method with the deletions parameter set to 0. It inserts the string into the array. The array is joined back using the join() method. This makes it one whole string again with the new string joined in between.
Example:
<!DOCTYPE html><html>  <head>    <title>        How to insert a string        at a specific index?    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        How to insert a string        at a specific index?    </b>          <p>        The original string        is: GeeksGeeks    </p>          <p>        Click on the button to insert        'For' at the 5th index position    </p>          <p>        The new array is:         <span class="outputString"></span>    </p>      <button onclick="insertString()">        Insert element    </button>          <script type="text/javascript">          function insertString() {            let origString = "GeeksGeeks";            let stringToAdd = "For";            let indexPosition = 5;              // Split the string into individual            // characters            origString = origString.split('');              // Insert the string at the index position            origString.splice(indexPosition, 0, stringToAdd);              // Join back the individual characters            // to form a new string            newString = origString.join('');              document.querySelector('.outputString').textContent                        = newString;        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
javascript-string
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript
How to append HTML code to a div using JavaScript ?
Set the value of an input field in JavaScript
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?