I recently got a requirement to modify some strings in TypeScript. The task was to clean up user input by removing specific substrings from their entries. After some research and experimentation, I found several effective methods to achieve this in TypeScript.
In this tutorial, I will explain how to remove a substring from a string in TypeScript using various methods with detailed examples.
Suppose you have a string that contains user input, and you need to remove certain words or phrases from it. For instance, you have the following string:
let userInput: string = "Welcome to New York City, the city that never sleeps!";You want to remove the substring “the city that never sleeps” from this string.
Now, let us see how to do this using the below methods with examples.
Using the replace() Method
One of the best ways to remove a substring from a string in TypeScript is by using the replace() method. This method searches for a specified substring and replaces it with another substring (or an empty string if you want to remove it).
Syntax:
string.replace(substringToRemove, '')Here:
replace()looks for the first occurrence of the substring.- Replaces it with an empty string, effectively removing it.
Example:
Here is an example with the complete code.
let userInput: string = "Welcome to New York City, the city that never sleeps!";
let cleanedInput: string = userInput.replace("the city that never sleeps", "");
console.log(cleanedInput); // Output: "Welcome to New York City, !"In this example, the replace() method finds the substring “the city that never sleeps” and replaces it with an empty string, effectively removing it from the original string.
I executed the above and you can see the exact output in the screenshot below:
Check out Replace All Occurrences of a Substring in a String in TypeScript
Using Regular Expressions with replace()
The replace() method also supports regular expressions, which can be very useful for more complex string manipulations. For example, if you want to remove all occurrences of a substring regardless of case sensitivity, you can use a regular expression with the i flag.
Example:
Here is an example and the complete code.
let userInput: string = "Welcome to New York City, the City That Never Sleeps!";
let cleanedInput: string = userInput.replace(/the city that never sleeps/i, "");
console.log(cleanedInput); // Output: "Welcome to New York City, !"Here, the regular expression /the city that never sleeps/i matches the substring “the city that never sleeps” case-insensitively and removes it from the string.
Check out Replace Characters in a String Using TypeScript
Using the split() and join() Methods
Another method to remove a substring from a string is by using the split() and join() methods in TypeScript. This approach involves splitting the string into an array of substrings using the target substring as the delimiter and then joining the array back into a single string without the target substring.
Syntax:
string.split(substringToRemove).join("")Example:
Let me show you an example.
let userInput: string = "Welcome to New York City, the city that never sleeps!";
let parts: string[] = userInput.split("the city that never sleeps");
let cleanedInput: string = parts.join("");
console.log(cleanedInput); // Output: "Welcome to New York City, !"In this example, the split() method breaks the string into an array of substrings, and the join() method concatenates them back together, effectively removing the target substring.
You can see the exact output in the screenshot below:
Read Check if a String is Null or Empty in TypeScript
Using substring() or slice()
You can use this when you know the exact index of the substring you want to remove.
Syntax:
string.slice(0, startIndex) + string.slice(endIndex)Example:
Let me show you an example.
let cityState = "Austin,Texas";
let updated = cityState.slice(0, 6) + cityState.slice(12);
console.log(updated); // Output: "Austin"Using the slice() Method
The slice() method can also be used to remove a substring if you know the start and end indices of the substring within the original string. This method extracts parts of a string and returns them as a new string.
Example:
Here is the complete code and the example.
let userInput: string = "Welcome to New York City, the city that never sleeps!";
let startIndex: number = userInput.indexOf("the city that never sleeps");
let endIndex: number = startIndex + "the city that never sleeps".length;
let cleanedInput: string = userInput.slice(0, startIndex) + userInput.slice(endIndex);
console.log(cleanedInput); // Output: "Welcome to New York City, !"In this example, we first find the start and end indices of the substring to be removed. Then, we use the slice() method to extract the parts of the original string before and after the substring and concatenate them together.
Check out Generate Random Strings in TypeScript
Custom Function for Dynamic Removal
If you need more control, write your own function. Here is an example:
function removeSubstring(str: string, sub: string): string {
const index = str.indexOf(sub);
if (index === -1) return str;
return str.slice(0, index) + str.slice(index + sub.length);
}
let input = "Jessica_Alba";
let result = removeSubstring(input, "_Alba");
console.log(result); // Output: "Jessica"Handle Special Cases While Removing a Substring from a String
When removing substrings from strings, handling edge cases is important to ensure your solution is robust. Here are a few common special cases to consider:
Substring Not Found
If the substring to be removed is not found in the original string, the methods should gracefully handle this.
Example
Here is an example.
let userInput: string = "Welcome to New York City, the city that never sleeps!";
let substring: string = "not in the string";
let cleanedInput: string = userInput.replace(substring, "");
console.log(cleanedInput); // Output: "Welcome to New York City, the city that never sleeps!"Multiple Occurrences
You might want to remove all occurrences if the substring appears multiple times in the original string.
Example
Let me show you an example.
let userInput: string = "New York City, New York City, New York City!";
let cleanedInput: string = userInput.replace(/New York City/g, "");
console.log(cleanedInput); // Output: ", , !"Here, the g flag in the regular expression ensures that all occurrences of “New York City” are removed.
Empty String
If the original string is empty, the methods should handle this without errors.
Example
Here is an example of handling empty string.
let userInput: string = "";
let cleanedInput: string = userInput.replace("anything", "");
console.log(cleanedInput); // Output: ""Conclusion
In this tutorial, I have explained multiple ways to remove a substring from a string in TypeScript. We covered simple built-in methods like replace() and split(), as well as more advanced techniques using regular expressions and custom functions.
Do let me know if you still have any questions.
You may also like:
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
