How to remove characters from a string in JavaScript
In JavaScript, strings are primitive values that contain a series of characters enclosed in single (' ') quote, double (" ") quotes or backticks (` `) that are zero-based. Strings are immutable, which means that when a string is modified, the original string doesn’t change, instead we get a new string.
JavaScript provides built-in methods to manipulate the value of a string. With string manipulation we can modify and transform strings using various techniques, that helps us write less code and makes our job easier. One of the ways we can manipulate strings is by removing characters from the string.
The following methods can be used to remove characters from a string in JavaScript:
The
replace()methodThe
slice()methodThe
split()methodThe
substr()methodThe
substring()method
Let’s look at these methods one by one:
The replace() method
This method returns a new string with its replacement. It takes in two arguments—the first argument is the character to be replaced and the second argument is the character we are replacing it with. To remove the character using the replace() method, we replace the second argument with an empty string.
Syntax
nameOfstring.replace('characterToBeReplaced', 'newCharacter');
Example
const str = "Hello World";// replacing H with Bconst repStr = str.replace("H", "B"); // "Bello World"console.log(repStr);// removing character Wconst newStr = str.replace("W", ""); // "Hello orld"console.log(newStr);
Explanation
Line 4: The replace() method replaces H (first argument) with B (second argument).
Line 9: The replace() method removes the W character and returns a new string Hello orld.
The Replace() method with a regular expression
We can also use the replace() method with regular expressions. The regular expression is used along with the global property, g. This combination selects all occurrences of the string and allows us to remove them all.
Syntax
nameOfstring.replace( /regularExpression/g, "");
Example
const str = "The day is bright, it's bright and fair.";// replacing bright with amazingconst repStr = str.replace(/bright/g, "amazing");console.log(repStr); //The day is amazing, it's amazing and fair.// removing brightconst remStr = str.replace(/bright/g, "");console.log(remStr); //The day is , it's and fair.
Explanation
Line 3: The
replace()method selects all occurrences of the word bright, and replaces them with amazing.Line 8: The
replace()method removes all occurrences of the word bright.
The slice() method
This method extracts a portion of the string. It takes in two parameters—the start index and the end index, and returns the string between them.
Syntax
nameOfString.slice(startIndex, endIndex);
Example
Explanation
Line 4: When the
slice()method has zero arguments, it creates a copy of the string.Line 8: When the
slice()method contains one argument, this argument represents the start index. Therefore, the extraction started from the start indextwhich is the third character to the end of the array excluding the element at the end index, so the extracted item isthematics.Line 12: When the
slice()method contains two arguments, it extracts from the start index to the end index. Here, the extraction started fromawhich is the seventh character and stopped attwhich is the eighth character.Line 16: When given a negative index, the
slice()method counts backward from the end of the string to find the indices.Line 20: To remove the last character using
slice()method, we passstring.length-1as the end index. The default forendIndexis the length of the string.
The split() method
This method uses the separator to break up the string into substrings, it can also take up an optional argument that shows the limit of items to be put in the array.
Syntax
Example
Explanation
Line 4: The
split()method uses the separator (" ") to divide the string into substrings.Line 7: The
split()method takes in 2 arguments: the first is an empty string and the second argument is2(limit of items to be put in the array).
The substr() method
This method extracts a portion of the string, it takes in two arguments—the start index and the length of the substring. If the substr() method contains one argument, it extracts from the start index to the end of the string.
Syntax
Example
Explanation
Line 3: The extraction started from index
0till index4(excluding index 4).
The substring() method
This method extracts characters from the start index to the end index (excluding the element at the end index).
Syntax
Example
Explanation
Line 4: The extraction started from index
0till index4(excluding index 4).Line 6: The extraction is started from index
7till the end.Lines 9–10: If the
startIndexis greater than theendIndex, arguments are swapped.Line 13: If the value of the
startIndexorendIndexis less than 0, these values are treated as 0.
