Split a String only on the First Occurrence of a Character

# Table of Contents

1. Split a String only on the First Occurrence of a Character
2. Split a String only on the First Occurrence of a Character using limit
3. Split a String only on the First Occurrence of a Character using Array.slice()
4. Split a String only on the First Occurrence of a Character using regex

# Split a String only on the First Occurrence of a Character

Use the String.split() method with array destructuring to split a string only on the first occurrence of a character.

The array destructuring syntax will capture the two parts of the string in separate variables.

Copied!
const str = 'bobby-hadz-com';
const [first, ...rest] = str.split('-');

console.log(first); // 👉️ bobby
console.log(rest); // 👉️ ['hadz', 'com']

const remainder = rest.join('-');
console.log(remainder); // 👉️ hadz-com

We used the String.split() method to split the string on a hyphen (-).

We used array destructuring assignment to assign the first element of the array to the first variable.

The rest (...) operator is used to gather the remaining array elements into the rest variable.

The last step is to use the Array.join() method to join the rest array with a hyphen separator.

If you have to split a string only of the first occurrence often, define a reusable function.

Copied!
function splitFirstOccurrence(str, separator) {
  const [first, ...rest] = str.split(separator);

  const remainder = rest.join('-');

  return {first, remainder};
}

const result = splitFirstOccurrence('bobby-hadz-com', '-');
console.log(result); // { first: 'bobby', remainder: 'hadz-com' }

console.log(result.first); // bobby
console.log(result.remainder); // hadz-com

The function takes a string and a separator as parameters and splits the string only on the first occurrence of the separator.

# Split a String only on the First Occurrence of a Character using limit

If you only need to get the first part after splitting, set the limit argument to 1.

Copied!
const arr = 'bobby-hadz-com'.split('-', 1);

console.log(arr); // 👉️ [ 'bobby' ]

console.log(arr[0]); // 👉️ bobby

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

The String.split() method takes the following 2 parameters:

When the limit argument is set to 1, only the part before the first occurrence of the delimiter is contained in the array.

# Split a String only on the First Occurrence of a Character using Array.slice()

Alternatively, you can use the slice method.

The slice method will return the portion of the string after the first occurrence of the character.

Copied!
const str = 'bobby-hadz-com';

const after = str.slice(str.indexOf('-') + 1);
console.log(after); // 👉️ hadz-com

const before = str.slice(0, str.indexOf('-'));
console.log(before); // 👉️ bobby

The String.slice method extracts a section of a string and returns it, without modifying the original string.

The String.slice() method takes the following arguments:

When only a single argument is passed to the String.slice() method, the slice goes to the end of the string.

The first example shows how to get the part after the last occurrence of a character.

Copied!
const str = 'bobby-hadz-com';

const after = str.slice(str.indexOf('-') + 1);
console.log(after); // 👉️ hadz-com

The second example shows how to get the part before the first occurrence of the character.

Copied!
const str = 'bobby-hadz-com';

const before = str.slice(0, str.indexOf('-'));
console.log(before); // 👉️ bobby

The slice starts at index 0 and goes up to, but not including the index of the separator.

# Split a String only on the First Occurrence of a Character using regex

You can also split a string on the first occurrence of a character by passing a regex to split().

Copied!
const str = 'bobby-hadz-com';

const arr = str.split(/-(.*)/);
console.log(arr); // 👉️ [ 'bobby', 'hadz-com', '' ]

const [before, after] = arr;

console.log(before); // 👉️ bobby
console.log(after); // 👉️ hadz-com

The forward slashes / / mark the beginning and end of the regular expression.

The regex is in the form of /{char_to_split_on}(.*)/.

The parentheses are called a capturing group.

The dot . is a special character and matches any single character.

The asterisk * character matches the preceding item (any character) 0 or more times.

When we split with a capturing group, the matched results are returned in the array.

You can use destructuring assignment to assign the first two array elements to variables or access the array at a specific index.

Copied!
const str = 'bobby-hadz-com';

const arr = str.split(/-(.*)/);
console.log(arr); // 👉️ bobby

console.log(arr[0]); // 👉️ bobby
console.log(arr[1]); // 👉️ hadz-com

JavaScript indexes are zero-based, so the first element in an array has an index of 0 and the last element has an index of array.length - 1.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Split a String on Capital Letters using JavaScript
• Split a String and get First or Last Array Element in JS
• Split on the Last Occurrence of a String in JavaScript
• Split a Number into an Array in JavaScript
• Split a String removing any Empty Elements in JavaScript
• Split a String at a specific Index using JavaScript
• How to Split a String by Newline in JavaScript
• How to Split a String by a Regex in JavaScript
• Split a String with multiple Separators using JavaScript
• How to Split a string by Spaces in JavaScript
• Split a String by Special Characters in JavaScript
• Split a String every N characters in JavaScript