Remove everything after a specific Character in JavaScript

# Remove everything after a specific Character in JavaScript

To remove everything after a specific character in a string:

1. Use the String.split() method to split the string on the character.
2. Access the array at index 0.
3. The first element in the array will be the part of the string before the specified character.

Copied!
// ✅ Remove everything after the first occurrence of a character
const str = 'BMW[1996]';

const result = str.split('[')[0];
console.log(result); // 👉️ BMW

// -------------------------------------------------------------

// ✅ Remove everything after the last occurrence of a character

const str2 = 'BMW[abc][1996]';

const result2 = str2.slice(0, str2.lastIndexOf('['));
console.log(result2); // 👉️ BMW[abc]

We used the String.split() method to split on the bracket [ character.

The split() method returned an array of 2 substrings - the parts of the string before and after the character.

Copied!
const str = 'BMW[1996]';

const split = str.split('[');
console.log(split); // 👉️ [ 'BMW', '1996]' ]

console.log(split[0]); // 👉️ 'BMW'

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.

We can also use array destructuring to assign the value before the specified character to a variable in a single statement.

Copied!
const str = 'BMW[1996]';

const [first, second] = str.split('[');
console.log(first); // 👉️ 'BMW'

console.log(second); // 👉️ '1996]'

The array destructuring assignment can be used to assign the values in an array to variables in a single statement.

# Remove everything after a specific Character using String.slice()

An alternative approach is to use the slice() method.

The slice() method will return the part of the string before the specified character.

Copied!
const str = 'BMW[1996]';

// ✅ Remove everything after the first occurrence of a character

const result = str.slice(0, str.indexOf('['));
console.log(result); // 👉️ BMW

// ------------------------------------

// ✅ Remove everything after the last occurrence of a character

const str2 = 'BMW[abc][1996]';

const result2 = str2.slice(0, str2.lastIndexOf('['));
console.log(result2); // 👉️ BMW[abc]

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:

The String.lastIndexOf() method returns the index of the last occurrence of a substring in a string.

The method returns -1 if the substring is not contained in the string.

You might have to handle a scenario where the indexOf() method returns -1.

If you're unsure whether the string contains the specific character, use an if statement.

Copied!
const str = 'BMW[1996]';

let result;

const index = str.indexOf('[');

if (index !== -1) {
  result = str.slice(0, index);
}

console.log(result); // 👉️ BMW

We only assign a string to the result variable if we're sure that the character was found in the string.

Copied!
const str = 'BMW[abc][1996]';

const result = str.slice(0, str.lastIndexOf('['));
console.log(result); // 👉️ BMW[abc]

We have two sets of brackets in the string and we only want to remove everything after the last set of brackets.

The String.lastIndexOf() method returns the index of the last occurrence of a substring in a string.

The method returns -1 if the substring is not contained in the string.

Alternatively, you can use the String.substring() method.

# Remove everything after a specific Character using String.substring()

This is a two-step process:

1. Use the String.indexOf() method to get the index of the character.
2. Use the String.substring() method to get the part of the string before the character.

Copied!
const str = 'BMW[1996]';

// ✅ Remove everything after the first occurrence of a character

const result = str.substring(0, str.indexOf('['));
console.log(result); // 👉️ BMW

// ------------------------------------

// ✅ Remove everything after the last occurrence of a character

const str2 = 'BMW[abc][1996]';

const result2 = str2.substring(0, str2.lastIndexOf('['));
console.log(result2); // 👉️ BMW[abc]

The String.substring() method returns a slice of the string from the start index to the excluding end index.

The method takes the following parameters:

We used the String.substring() method in a very similar way to how we used the String.slice() method.

However, there are a couple of differences between the String.substring() and the String.slice() methods:

• The substring() method swaps its start and end index if the start index is greater than the end index. The slice() method returns an empty string in this case.

Copied!
const str = 'bobby';

console.log(str.substring(3, 0)); // 👉️ bob

console.log(str.slice(3, 0)); // 👉️ ''

• If either of both arguments passed to substring() are negative, they are treated as if they were 0.

Copied!
const str = 'bobby';

console.log(str.substring(-3)); // 👉️ bobby

console.log(str.slice(-3)); // 👉️ bby

When given a negative index, the slice() method counts backward from the end of the string to find the indexes.

For these reasons, it is recommended to use the String.slice() method as it works in a more predictable manner.

# Remove everything after a specific Character using regex

You can also use a regular expression.

Copied!
const str = 'BMW[1996]';

const result = str.replace(/\[.*/, '');
console.log(result); // 👉️ BMW

// -----------------------------------------

const str2 = 'BMW-1996';

const result2 = str2.replace(/-.*/, '');
console.log(result2);

We used the String.replace() method to replace everything after the specified character with an empty string.

The String.replace() method returns a new string with one, some, or all matches of a regular expression replaced with the provided replacement.

The method takes the following parameters:

The String.replace() method returns a new string with the matches of the pattern replaced. The method doesn't change the original string.

Strings are immutable in JavaScript.

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

Copied!
const str = 'BMW[1996]';

const result = str.replace(/\[.*/, '');
console.log(result); // 👉️ BMW

We used a backslash to escape the [ character because square brackets have a special meaning in regular expressions.

The dot . is used to match any single character.

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

In its entirety, the regular expression matches everything after the bracket [ and replaces it with an empty string to remove it.

Here is another example.

Copied!
const str2 = 'BMW-1996';

const result2 = str2.replace(/-.*/, '');
console.log(result2);

In this case, we match everything after the hyphen and replace it with an empty string.

If you ever need help reading a regular expression, check out this regular expression cheatsheet by MDN.

It contains a table with the name and the meaning of each special character with examples.

Which approach you pick is a matter of personal preference. I'd use the String.split() method as I find it quite direct and easy to read.

# Additional Resources

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

• Remove all non-numeric characters from String in JavaScript
• Replace/Remove characters that Don't match Regex in JS
• Remove First and Last Characters from a String in JavaScript
• Remove the first N characters from a String in JavaScript
• Remove the last N Characters from a String in JavaScript
• Remove special Characters from a String in JavaScript