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:
xxxxxxxxxxconst 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.
xxxxxxxxxxconst 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 ____-3This 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: .*+?^=!:${}()|[]/\.
xxxxxxxxxxconst 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:
escapeExpressionfunction 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.
xxxxxxxxxxconst inputText: string = 'This? is? my text.';const searchText: string = 'is\\?'; // escaped ? characterconst newText: string = '__';const searchRegex: RegExp = new RegExp(searchText, 'g'); // global searching flagconst outputText: string = inputText.replace(searchRegex, newText);console.log(outputText); // Output: Th__ __ my text.