Skip to main content

How to Split a String Only on the First Occurrence of a Character in JavaScript

A common string parsing task is to split a string into exactly two parts at the first occurrence of a specific delimiter. For example, you might need to separate a key from a value in a key=value string, or divide a URL into its protocol and the remainder.

This guide will demonstrate the modern and most robust method for this task using String.prototype.indexOf() and slice(). We will also cover an alternative using split() with a limit parameter and explain its different behavior.

This is the most direct, readable, and flexible method. It precisely finds the first delimiter and slices the string into two parts around it.

Problem: you have a string and you need to split it into two pieces at the first hyphen (-).

// Problem: Split this string into "tutorial" and "reference-com".
let myString = 'tutorial-reference-com';

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

function splitOnFirst(str, separator) {
  // Find the index of the first occurrence of the separator.
  let index = str.indexOf(separator);

  // If the separator is not found, return the original string in an array.
  if (index === -1) {
    return [str];
  }

  // Slice the string into two parts.
  let part1 = str.slice(0, index);
  let part2 = str.slice(index + separator.length);

  return [part1, part2];
}

// Example Usage:
let str = 'tutorial-reference-com';
let [user, domain] = splitOnFirst(str, '-');

console.log(user);   // Output: "tutorial"
console.log(domain); // Output: "reference-com"

Output:

tutorial
reference-com

An Alternative Method: split() with a limit​

The String.prototype.split() method has an optional second argument, limit, which specifies the maximum number of splits to be found. This can be used to solve the problem, but its behavior is different.

let str = 'tutorial-reference-com';

// The limit `2` means the returned array will have at most 2 elements.
let parts = str.split('-', 2);

console.log(parts);

Output:

['tutorial', 'reference']
note

Important Limitation: While this looks very concise, split() with a limit is designed to return a specific number of split substrings. In many languages, this would return the first part and the entire rest of the string. In JavaScript, it simply stops after finding limit - 1 occurrences of the separator and returns the substrings it found. For a single split, this works as expected.

For a more complex separator (/-(.*)/), the behavior can be less intuitive for beginners, making the indexOf/slice method generally clearer and more recommended.

How the indexOf() and slice() Method Works​

Let's break down the splitOnFirst('tutorial-reference-com', '-') function:

  1. str.indexOf('-'): This method finds the index of the first occurrence of the - character. It returns 5.
  2. str.slice(0, index): Slices the string from the beginning (index 0) up to (but not including) index 7. This returns "tutorial".
  3. str.slice(index + separator.length): Slices the string from after the found separator. The starting point is 5 + 1 = 6. This returns "reference-com".
  4. The function then returns these two parts in an array: ['tutorial', 'reference-com'].

This method is robust because it correctly handles cases where the separator isn't found (by returning the original string) and works with multi-character separators.

Practical Example: A Reusable splitOnce Function​

This example creates a robust, reusable function that you can add to a utility library.

/**
 * Splits a string into two parts at the first occurrence of a separator.
 * @param {string} str The string to split.
 * @param {string} separator The delimiter to split on.
 * @returns {Array<string>} An array containing the two parts.
 */
function splitOnce(str, separator) {
  let index = str.indexOf(separator);

  if (index === -1) {
    return [str, '']; // Or [str] depending on desired behavior
  }

  return [
    str.slice(0, index),
    str.slice(index + separator.length)
  ];
}

// Example Usage: Parsing a query parameter
let url = 'https://example.com?query=hello world';
let [baseUrl, queryString] = splitOnce(url, '?');

console.log(baseUrl);     // Output: 'https://example.com'
console.log(queryString); // Output: 'query=hello world'

Output:

https://example.com
query=hello world

Conclusion​

Splitting a string only on the first occurrence of a delimiter is a common parsing task with a clear, preferred solution in JavaScript.

  • The recommended best practice is to find the position of the separator using indexOf() and then reconstruct the two parts using slice(). This method is explicit, readable, and handles all edge cases gracefully.
  • The split() method with a limit is a valid and concise alternative, but the indexOf/slice approach is often considered more fundamental and easier to reason about.

Table of Contents