TypeScript:
Searching and replacing text

How to:

TypeScript, building on JavaScript, comes with handy methods for string manipulation. We can use String.prototype.replace() for basic search and replace operations. Check out these snippets:

// Simple string replace
let text: string = "Hello, World!";
let newText: string = text.replace("World", "TypeScript");
console.log(newText);  // Output: Hello, TypeScript!

// Global replace with regex
let regexText: string = "foo bar foo bar";
let globalRegex: RegExp = /foo/g;
let newRegexText: string = regexText.replace(globalRegex, "baz");
console.log(newRegexText);  // Output: baz bar baz bar

// Replace with a function
let dynamicText: string = "I have 2 apples and 5 oranges.";
let fruitCounter: string = dynamicText.replace(/\d+/g, (match) => {
    return (+match * 2).toString();
});
console.log(fruitCounter);  // Output: I have 4 apples and 10 oranges.

Deep Dive

Historically, text replacement has been a feature in even the earliest text-processing tools, with Unix tools like sed being iconic examples. In more modern programming, replace operations are often more powerful when coupled with regular expressions (regex) for pattern matching.

Alternatives to String.prototype.replace() in TypeScript are multiple. Libraries like Lodash offer _.replace() with a similar syntax. For more advanced scenarios, you might consider building your own parser or using parser libraries for transformation tasks that go beyond simple string replacement.

When we talk implementation, remember .replace() won’t mutate the original string. Strings in JavaScript and TypeScript are immutable. The method returns a new string, so if you need the modified text, you’ll have to store it, like in the examples above.

See Also

• MDN Web Docs on replace(): MDN String replace
• Regex testing tool to sharpen your pattern matching skills: Regex101
• Lodash’s string replace for an alternative approach: Lodash _.replace