Skip to main content

How to Get the Substring Before a Specific Character in JavaScript

Extracting a portion of a string that comes before a specific character or delimiter is a common text processing task. You might need to get the username from an username@domain.com email address, or the protocol from a URL. JavaScript's built-in string methods make this task simple and efficient.

This guide will teach you the most effective methods for this task. We'll cover the recommended approach using indexOf() and slice() for its precision and performance, and the popular split() method for its conciseness.

The Core Problem: Finding the Text Before a Delimiter​

The goal is to find the first occurrence of a delimiter and return the entire substring that precedes it.

For example, how to get the username tomnolan from this string?

const email = 'tomnolan@example.com';

We need a method that can find the first @ symbol and return everything before it.

This is the most performant, robust, and readable method for this specific task. It avoids creating unnecessary intermediate arrays and gives you precise control.

The logic:

  1. Use String.prototype.indexOf(char) to find the index of the first occurrence of the delimiter.
  2. If the character is found, use String.prototype.slice(0, index) to extract the part of the string from the beginning (0) up to that index.

Solution:

function getBeforeFirst(str, char) {
  // Find the index of the first occurrence of the character
  const firstIndex = str.indexOf(char);
  
  // If the character is not found, you might want to return the whole string
  // or handle it as an error, depending on your use case.
  if (firstIndex === -1) {
    return str;
  }
  
  // Slice the string from the beginning to the character's index
  return str.slice(0, firstIndex);
}

// Example Usage:
const email = 'tomnolan@example.com';
const username = getBeforeFirst(email, '@');
console.log(username); // Output: "tomnolan"

The split() Method (Simple and Readable)​

This method is often very intuitive and easy to write in a single line. It splits the string into an array of segments and then simply takes the first one.

The logic:

  1. Use String.prototype.split(char) to break the string into an array of substrings, using the character as the delimiter.
  2. Take the first element of the resulting array at index 0.

Solution:

function getBeforeFirst(str, char) {
  return str.split(char)[0];
}

// Example Usage:
const email = 'tomnolan@example.com';
const username = getBeforeFirst(email, '@');
console.log(username); // Output: "tomnolan"
note

While highly readable, this method can be slightly less performant on very long strings because it has to process the entire string and create an array, even though you only need the first part.

Crucial Distinction: "Before First" vs. "Before Last"​

It is important not to confuse this task with the related problem of getting the substring before the last occurrence of a character (e.g., getting a file path without the filename).

  • Before First Occurrence: 
    str.slice(0, str.indexOf(char));
  • Before Last Occurrence (a different problem): 
    str.slice(0, str.lastIndexOf(char));
note

The split() method is not as well-suited for "before last" logic, which is why the slice and indexOf/lastIndexOf combination is a more versatile pattern to learn.

What Happens When the Character is Not Found​

A robust solution must handle cases where the delimiter does not exist in the string.

  • indexOf and slice: indexOf() will return -1. str.slice(0, -1) would then return the entire string except for the last character, which is not what we want. Our function correctly checks for -1 and returns the whole string.
  • split: split() will return an array containing just the original string ['fullstring']. Accessing index 0 then correctly returns the entire original string.

Both methods can be easily adapted to return an empty string ('') or throw an error if the delimiter is not found, depending on your needs.

Conclusion​

For getting the substring that precedes the first occurrence of a character, JavaScript offers two excellent, concise solutions.

  • The indexOf() and slice() combination is the most performant and precise method. It is the recommended best practice for performance-critical applications or for building more complex parsing logic.
  • The split()[0] method is often more readable and intuitive for simple cases. It is a great choice for day-to-day scripting where absolute performance is not a concern.

Table of Contents