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
Inserting string at position x of another string using Javascript
In this article, you are going to learn how to insert a string at a position in another string.
JavaScript does not provide a direct method to insert a string at a specific position. However, we can achieve this using various string methods like slice(), substr(), and array methods like join().
Using the slice() Method
The slice() method extracts a section of a string and returns a new string without modifying the original string.
Syntax
String.slice(start, end)
Parameters
start ? Required. The position from where to start extraction (0-indexed).
end ? Optional. The position where to stop extraction (not included). If omitted, extracts to the end.
Example
<!DOCTYPE html>
<html>
<head>
<title>Insert String Using slice() Method</title>
</head>
<body>
<script>
function insertAtPosition(originalString, insertString, position) {
return originalString.slice(0, position) + insertString + originalString.slice(position);
}
let result = insertAtPosition("Hello World", "Beautiful ", 6);
document.write("Original: Hello World<br>");
document.write("Insert 'Beautiful ' at position 6: " + result);
</script>
</body>
</html>
Original: Hello World Insert 'Beautiful ' at position 6: Hello Beautiful World
Using the join() Method with Array
The join() method combines array elements into a string using a specified separator.
Syntax
Array.join(separator)
Example
<!DOCTYPE html>
<html>
<head>
<title>Insert String Using join() Method</title>
</head>
<body>
<h2>String Insertion Demo</h2>
<p id="original"></p>
<button onclick="insertString()">Insert String</button>
<p id="result"></p>
<script>
let originalStr = "JavaScript Programming";
let insertStr = "Advanced ";
let position = 11;
document.getElementById("original").innerHTML =
"Original: " + originalStr + "<br>Insert: '" + insertStr + "' at position " + position;
function insertString() {
let newString = [originalStr.slice(0, position), insertStr, originalStr.slice(position)].join("");
document.getElementById("result").innerHTML = "Result: " + newString;
}
</script>
</body>
</html>
Original: JavaScript Programming Insert: 'Advanced ' at position 11 Result: JavaScript Advanced Programming
Using the substr() Method
The substr() method extracts characters from a string, beginning at a specified position, and returns a specified number of characters.
Syntax
String.substr(start, length)
Parameters
start ? The position from where to begin extraction (0-indexed).
length ? Optional. Number of characters to extract. If omitted, extracts to the end.
Example
<!DOCTYPE html>
<html>
<head>
<title>Insert String Using substr() Method</title>
</head>
<body>
<h2>String Insertion with substr()</h2>
<p id="demo1"></p>
<button onclick="performInsertion()">Insert String</button>
<p id="demo2"></p>
<script>
let firstString = "TutorialsPoint";
let secondString = "Easy ";
let insertPosition = 9;
document.getElementById("demo1").innerHTML =
"String 1: " + firstString + "<br>String 2: " + secondString + "<br>Position: " + insertPosition;
function performInsertion() {
let result = firstString.substr(0, insertPosition) + secondString + firstString.substr(insertPosition);
document.getElementById("demo2").innerHTML = "Result: " + result;
}
</script>
</body>
</html>
String 1: TutorialsPoint String 2: Easy Position: 9 Result: TutorialsEasy Point
Comparison of Methods
| Method | Approach | Performance | Readability |
|---|---|---|---|
slice() |
Direct concatenation | Fast | Very clear |
join() |
Array-based | Good | Clear |
substr() |
Direct concatenation | Fast | Clear |
Conclusion
All three methods effectively insert strings at specific positions. The slice() method is generally preferred for its clarity and performance, while join() offers flexibility for complex operations.
1K+ Views
