Remove First and Last Character from String in JavaScript

In this guide, we will see different ways to remove the first and the last character from a string.

We will use the following methods to perform the task:

• Using substring() method
• Using slice() method
• Using replace() method

Using substring() method

We can extract part of a sting between two positions using the substring() method. We can pass two parameters in the substring() method i.e. start index and end index.

The start index starts at position 0. We want to remove the first character, so we will pass 1 as the start index value in the example below.

The substring() method only extracts substring up to the end index but excludes the character at the end index. We want to remove the last character, so we will subtract 1 from the length of the string.

For example:

var str = "/javascript/";
 
var result = str.substring(1, str.length - 1);
 
console.log(result);   // Output: javascript

NOTE: If we already know which character we want to remove from the first and the last position of a string then using replace() method along with regular expression might be a good idea because with the help of regular expression, we can safely check and only remove the character if the character we want to remove is present in the beginning or end of the string. Otherwise, we can skip the removal process. The substring() and slice() methods always remove the first and the last character from the string.

See Also: Remove the Last Character from a String in JavaScript

Using slice() method

We can also slice and extract the part of a string using the slice() method. The slice() method returns a new string without modifying the original string.

We can pass two parameters in the slice() method i.e. start index and end index.

The substring() and slice() methods are very similar. The only difference is start and end index value less than 0 is treated as 0 in the substring() method. Whereas the negative start index value i.e. start index value less than 0 is counted from the end of the string in the slice() method.

The start index starts at position 0. We want to remove the first character, so we will pass 1 as the start index value in the example below.

The slice() method also only extracts substring up to the end index but excludes the character at the end index. We want to remove the last character, so we will subtract 1 from the length of the string. Alternatively, we can also pass -1 as the end index value because in the slice() method, -1 is the last character of the string.

For example:

var str = "/javascript/";
 
var result = str.slice(1, str.length - 1);
 
var result2 = str.slice(1, -1);
 
console.log(result);   // Output: javascript
console.log(result2);   // Output: javascript

Using replace() method

The replace() method accepts two arguments. The first argument is the value or regular expression to search for and the second is the new value to replace with. 

For example:

var str = "/javascript/";
 
var result = str.replace(/^\/|\/$/g, "");
 
console.log(result);  // Output: javascript

In the above example, we have passed the regular expression /^\/|\/$/g  as the search value and an empty string as the replacement value. What we are doing is basically we are checking if / is present at the beginning or the end of the string and replacing it with an empty string.

It may look weird and complicated if you are not familiar with regular expressions. But it is very easy to understand. Let me explain.

First, let’s get familiar with the symbols of regular expression we have used in the above example.

The regular expression is enclosed inside two forward slashes /.  In the above example, the regular expression is enclosed inside the first / and the / just before the global g flag. /^\/|\/$/g

^ Matches the beginning of the string. E.g. /^a/ matches the first “a”  in “an apple”.

In our example above, /^\// matches the first / in the string “/javascript/”. Note the escape character \ before / character.

\ Escapes the character that comes after \ symbol.

In our example above \ escapes the / symbol. We have used escape character \ in the above example because / symbol is treated as a special character in JavaScript. If it was a normal letter then we wouldn’t have to use the escape character.

| Acts like a boolean OR. It matches the expression before or after the |. 

$ matches the end of the string. E.g. /e$/ matches the last “e” in “pineapple”.

In our example above /\/$/ matches the last / in the string “/javascript/”.

g Global flag g performs the global search meaning searches for the matches globally not just the first occurrence of the match. E.g. /a/g matches all ‘a’ in ‘anaconda’.

/a/ only matches the first ‘a’ in ‘anaconda’.