Skip to main content

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

While the String.prototype.split() method breaks a string at every occurrence of a delimiter, a common requirement is to split a string only at the last occurrence. For example, you might want to separate a filename from its path (path/to/file.txt -> ['path/to', 'file.txt']) or get the domain from an email address.

This guide will teach you the modern and most direct method for this task using lastIndexOf() and slice(). This approach is efficient and gives you precise control over the result.

The Core Method: lastIndexOf() and slice()​

The most robust and readable way to split a string at the last occurrence of a character is a two-step process:

  1. Find the Index: Use String.prototype.lastIndexOf() to find the position of the last occurrence of your delimiter.
  2. Slice the String: Use String.prototype.slice() twice to get the part of the string before the index and the part after it.

Problem: you want to split a file path to separate the directory path from the filename.

// Problem: How to split this string at the last '/'?
let filePath = 'path/to/my/document.txt';

Solution:

let filePath = 'path/to/my/document.txt';
let separator = '/';

// 1. Find the index of the last separator.
let lastIndex = filePath.lastIndexOf(separator);

// 2. Get the part before the separator.
let directoryPath = filePath.slice(0, lastIndex);

// 3. Get the part after the separator.
let filename = filePath.slice(lastIndex + 1);

console.log(directoryPath); // Output: 'path/to/my'
console.log(filename);      // Output: 'document.txt'

Output:

path/to/my
document.txt
note

This method is explicit and gives you two clean variables representing the two parts of the split.

How the Method Works​

  • lastIndexOf(separator): This method searches the string from right to left and returns the index of the first (from the right) occurrence of the separator. For path/to/my/document.txt, lastIndexOf('/') returns 11.
  • slice(0, lastIndex): This extracts the portion of the string from the beginning (index 0) up to, but not including, the index of the separator.
  • slice(lastIndex + 1): This extracts the portion of the string starting from the character immediately after the separator all the way to the end.

A Reusable splitOnLast Function​

For a cleaner and more reusable approach, you can encapsulate this logic in a function that returns an array, mimicking the behavior of the standard split() method.

/**
 * Splits a string on the last occurrence of a separator.
 * @param {string} str - The string to split.
 *-  * @param {string} separator - The character to split on.
 * @returns {[string, string]} An array containing the two parts.
 */
function splitOnLast(str, separator) {
  let lastIndex = str.lastIndexOf(separator);
  
  // If the separator is not found, return the whole string as the first part.
  if (lastIndex === -1) {
    return [str, ''];
  }
  
  let before = str.slice(0, lastIndex);
  let after = str.slice(lastIndex + separator.length); // Use separator.length to handle multi-char separators
  
  return [before, after];
}

// Example Usage:
let filePath = 'path/to/my/document.txt';
let [path, filename] = splitOnLast(filePath, '/');

console.log('Path:', path);         // Output: 'Path: path/to/my'
console.log('Filename:', filename); // Output: 'Filename: document.txt'

Output:

Path: path/to/my
Filename: document.txt

How to Handle the "Character Not Found" Edge Case​

A robust function must handle the case where the separator does not exist in the string. lastIndexOf() returns -1 in this scenario.

The reusable function in the previous section demonstrates the correct way to handle this:

  • It checks if lastIndex is -1.
  • If so, it returns an array where the first element is the original, unmodified string, and the second is an empty string. This provides a predictable and useful result.
let [before, after] = splitOnLast('filename.txt', '/');
console.log(before); // Output: 'filename.txt'
console.log(after);  // Output: ''

Conclusion​

Splitting a string at the last occurrence of a character is a common task that requires a slightly more manual approach than a simple split().

  • The recommended best practice is to use lastIndexOf() to find the position of the separator and then use slice() to extract the parts of the string before and after that position.
  • Encapsulating this logic in a reusable function that returns a two-element array ([before, after]) is a clean and maintainable pattern.
  • Always remember to handle the edge case where the separator is not found (lastIndexOf() returns -1).

Table of Contents