Skip to main content

How to Split a String at a Specific Index in JavaScript

A common string manipulation task is to split a string into two parts at a specific character index. This is useful for dividing a string into a prefix and a suffix, truncating text, or parsing data where position is meaningful.

This guide will demonstrate the modern and most recommended method for this task using String.prototype.slice(). We will also cover a more advanced use case: splitting a string at multiple indices.

The most direct and readable way to split a string at an index is to "slice" it into two separate substrings: the part before the index, and the part from the index onward.

Problem: you have a string and you need to split it into two pieces at a specific character position.

// Problem: Split "abcdef" at index 3 into "abc" and "def".
let myString = 'abcdef';
let splitIndex = 3;

Solution: this function encapsulates the logic and returns an array containing the two resulting substrings.

function splitAtIndex(str, index) {
  // 1. Get the part of the string before the index.
  let start = str.slice(0, index);

  // 2. Get the part of the string from the index to the end.
  let end = str.slice(index);

  return [start, end];
}

// Example Usage:
let myString = 'abcdef';
let parts = splitAtIndex(myString, 3);

console.log(parts); // Output: ['abc', 'def']

// You can use array destructuring for a cleaner result:
let [start, end] = splitAtIndex(myString, 3);
console.log(start); // Output: "abc"
console.log(end);   // Output: "def"

Output:

['abc', 'def']
abc
def
note

This method is the recommended best practice for its clarity and performance.

How the slice() Method Works for Splitting​

string.slice(startIndex, endIndex) extracts a section of a string and returns it as a new string.

  • startIndex: The zero-based index at which to begin extraction.
  • endIndex (optional): The zero-based index before which to end extraction. If omitted, slice() extracts through the end of the string.

Let's break down the function splitAtIndex('abcdef', 3):

  • str.slice(0, 3): Slices from index 0 up to (but not including) index 3. This returns "abc".
  • str.slice(3): When the endIndex is omitted, slice() extracts from the startIndex all the way to the end of the string. This returns "def".

An Advanced Use Case: Splitting at Multiple Indices​

What if you need to split a string at several different points? You can create a more advanced function to handle this.

Solution: this function takes a string and a variable number of index arguments.

function splitAtIndices(str, ...indices) {
  // Sort the indices to ensure we process them in order
  let sortedIndices = indices.sort((a, b) => a - b);
  
  let result = [];
  let lastIndex = 0;

  // Iterate over the sorted indices
  for (let index of sortedIndices) {
    result.push(str.slice(lastIndex, index));
    lastIndex = index;
  }
  
  // Add the final remaining part of the string
  result.push(str.slice(lastIndex));
  
  return result;
}

// Example Usage:
let longString = 'abcdefghij';

// Split at indices 3 and 7
let parts = splitAtIndices(longString, 7, 3); // Order doesn't matter

console.log(parts); // Output: ['abc', 'defg', 'hij']

Output:

['abc', 'defg', 'hij']

How it Works​

  1. ...indices: The rest parameter syntax gathers all index arguments into an array.
  2. indices.sort(...): We sort the indices numerically to ensure we process the string from left to right.
  3. for (let index of sortedIndices): The loop iterates through the split points.
  4. str.slice(lastIndex, index): For each iteration, it slices the string from the last split point to the current one.
  5. lastIndex = index: We update lastIndex to be the start of the next slice.
  6. result.push(str.slice(lastIndex)): After the loop, we add the final piece of the string (from the last index to the end).

Conclusion​

Splitting a string at a specific index is a simple task with a clear, preferred solution in JavaScript.

  • The slice() method is the recommended best practice for this task. It is readable, performant, and its intent is very clear.
  • To split at a single point, use the pattern: [str.slice(0, index), str.slice(index)].
  • For more advanced cases, you can build a reusable function that iterates through multiple indices to split a string into several parts.

Table of Contents