TypeScript - replace all occurrences of string
In this article, we're going to have a look at different ways how to replace all text occurances inside string in TypeScript. The most common problem in Typescript is lack of replaceAll method.
Quick overlook:
xxxxxxxxxx
const input: string = 'text-1 text-2 text-3';
const output: string = input.split('text').join('____');
console.log(output); // ____-1 ____-2 ____-3
More detailed and grouped solutions are placed below.
This section shows how to split string by some text and later join it putting new text beetwen.
xxxxxxxxxx
const input: string = 'text-1 text-2 text-3';
const searchText: string = 'text';
const newText: string = '____';
const output: string = input.split(searchText).join(newText);
console.log(output); // ____-1 ____-2 ____-3
This section shows how to replace all text occurances with RexExp
object. By default String
replace
method used with expression replaces only one text occurance. Solution of this problem is to add g
flag for expression object.
This example shows how to replace all occurrences of any text. The solution presented in this section uses escaped pattern as text we are looking for. This approach is strongly recommended if replaced text could contain expression controll characters like: .*+?^=!:${}()|[]/\
.
xxxxxxxxxx
const ESCAPE_EXPRESSION: RegExp = /([.*+?^=!:${}()|\[\]\/\\])/g;
function escapeExpression(expressionText: string): RegExp {
expressionText = expressionText.replace(ESCAPE_EXPRESSION, '\\$1');
return new RegExp(expressionText, 'g'); // global searching flag
}
function replaceAll(text: string, what: string, to: string): string {
const whatExpression: RegExp = escapeExpression(what);
return text.replace(whatExpression, to);
}
// Usage example:
const inputText: string = 'This? is? my text.';
const searchText: string = 'is?';
const newText: string = '__';
const outputText: string = replaceAll(inputText, searchText, newText);
console.log(outputText); // Output: Th__ __ my text.
Note:
escapeExpression
function escapes all characters from regular expression pattern.
This example shows how to replace all text occurances. It is recommended only when all replaced characters were escaped with \\
before. Main advantage of this approach is lack of unnecessary processing of replaced text.
xxxxxxxxxx
const inputText: string = 'This? is? my text.';
const searchText: string = 'is\\?'; // escaped ? character
const newText: string = '__';
const searchRegex: RegExp = new RegExp(searchText, 'g'); // global searching flag
const outputText: string = inputText.replace(searchRegex, newText);
console.log(outputText); // Output: Th__ __ my text.