In this tutorial, let’s look at how to remove the first character from string in JavaScript. We’re going to look at
1. The slice method,
2. Then, the substring method, which is quite like slice,
3. The replace method, and using regular expressions with it
4. Array methods like fill, shift and join that can be modified to work with strings, and finally
5. Methods to conditionally remove characters or remove multiple characters from the start of the string.
So, let’s get right into it then!
Slice method
Let’s start with the slice method. As the name implies, slice is a pre-defined JavaScript method that helps you ‘slice’ a portion of a string.
The syntax is as follows:
string.slice(starting_position, ending_position)
As you can see, it takes 2 arguments, the first being the starting_position and the second being the ending_position, and it slices the string from the character at the starting position to the character specified right before the ending position (ending_position – 1).
Since the string indices start from 0, if we’d like to remove the first character from the string, all we’d need to do is slice the string from the 1st index to str.length – 1 (the last character’s index), as shown below:
let str = 'Hello there'; str = str.slice(1,str.length); console.log(str); //ello there
Alternatively, you can just specify the first position, which is ‘1’, and the slice method will automatically slice from 1 to the last character of the string, as shown below:
str = str.slice(1); console.log(str); //ello there
Substring method
You can also use the substring method to achieve the same result. The substring method also accepts 2 arguments, where the first argument is compulsory.
Just like the slice() method, if you specify only the first argument, the substring method extracts the substring from the character at the index specified in the first argument till the end of the string, as shown below:
str = str.substring(1); console.log(str); //ello there
Replace method
The replace method is also a good option to remove the first character from the string. The easiest way of achieving this is by specifying what exactly you want to replace the original string with.
In our example we want to replace ‘Hello there’ with ‘ello there’, meaning we’ve removed the first character of the string.
So, let’s try that first.
str = str.replace('Hello there', 'ello there');
console.log(str); //ello there
The above example is good enough, but it requires knowledge of what exactly the first character is, and what exactly the string is. There’s no dynamic nature to this method.
So instead, what we can do is, use the charAt method and retrieve the character at the 0th index (first character of the string).
Then, by using the replace method, we can search for, and replace the first instance of that character (which will be the first character in this instance) with an empty string, which would effectively remove the first character of that string.
const char = str.charAt(0); //get the first character str = str.replace(char, ''); console.log(str); //ello there
Using regular expressions
You can also use regular expressions with the replace method for efficiency, and to reduce the number of lines of code.
In regular expressions ^ indicates the start of the string. If you tag a single period (.) right after the carat symbol (^), then you’re asking the replace method to look for just one character at the start of the string, meaning the first character of the string.
Replace that with an empty string, as shown below, and you’re good to go.
str = str.replace(/^./,''); console.log(str);
Using the splice and shift method
There are many methods that are specific to removing elements from arrays, but you can use them with strings as well.
All you need to do is convert the string to an array (temporarily) by using the ‘split’ method. If you give the split condition as an empty string (‘’), the method will split every character (including the spaces) of the string into a separate array element.
Then, you can use the splice method, which works like the string slice method, and splice the array from positions 1 till the last element of the array and reassign it to the original variable. Now, we’re left with an array that does not have its original first element.
Finally, join the array by giving an empty string as the join condition again, which will join all the array elements to create the original string, but without its first character.
let str = 'Hello there';
str = str.split(''); //["H","e","l","l","o"," ","t","h","e","r","e"]
str = str.splice(1); //["e","l","l","o"," ","t","h","e","r","e"]
str = str.join('');
console.log(str); //ello there
Similarly, you can achieve the same with the shift method. The only difference here is that the splice method needs the starting and ending position (or at least the starting position) of the splice, where as the shift method, by default, ‘shifts’, or ‘removes’ the first element of the array, so you can just use it as it is, as shown below:
str = str.split('');
str = str.shift();
str = str.join('');
console.log(str); //ello there
Conditionally remove characters
You can also conditionally remove the first characters, so our program leaves the string intact if the condition is not met.
For example, what if we want to remove the first character if it’s a ‘comma’, and leave it intact otherwise?
We can use the string’s charAt method to retrieve the character in the 0th position (first character). Then, we can use the ‘if’ statement to check if it’s a comma. If it is, remove the character. You can use any of the many methods we’ve looked at so far to perform this removal.
Otherwise, return the original string.
let str = ',Hello there';
if(str.charAt(0) === ',') {
str = str.replace(/^./,'');
}
console.log(str); //Hello there
Similarly, you can use regular expressions to broaden your condition. For example, if I want to remove the first character if it’s a number (from 0 to 9), and leave it intact otherwise, I can just include the \d flag right after the carat symbol to indicate that if the first character is a ‘digit’, remove it, and do nothing otherwise.
let str = '1Hello there'; str = str.replace(/^\d/,''); console.log(str); //Hello there
You can also use the [0-9] condition if you’d like. The digits flag and [0-9] condition work the same.
str = str.replace(/^[0-9]/,'');
Remove multiple characters from the start
You can also remove ‘n’ number of characters from the start of the string. For the slice and the substring method, you just need to specify ‘n’ instead of 1, to achieve this, as shown below:
let str = 'Hello there';
const removeMultiple = (n) => {
str = str.slice(n);
return str;
}
console.log(removeMultiple(3)); //lo there
For the regular expressions, right after the period, specify the number of characters you want removed. That is, ^.{3} would mean we’re extracting the first 3 characters. Once extracted, we can use the replace methods to replace them with an empty string, hence removing them.
str = str.replace(/^.{3}/,'');
console.log(str); //lo there
There you go! Those are the 5 methods of removing the first character of a string in JavaScript.