Languages
[Edit]
EN

JavaScript - how to replace all occurrences of string?

12 points
Created by:
AnnLen
9220

In this article, we're going to have a look at different ways how to replace all text occurances inside string in JavaScript. The most common problem in javascript is lack of replaceAll method.

Quick overlook:

// ONLINE-RUNNER:browser;

var input = 'text-1 text-2 text-3';
var output = input.split('text').join('____');

console.log(output); // ____-1 ____-2 ____-3

 

More detailed and grouped solutions are placed below.

1. Text splitting and joining example

This section shows how to split string by some text and later join it putting new text beetwen.

// ONLINE-RUNNER:browser;

var input = 'text-1 text-2 text-3';

var searchText = 'text';
var newText = '____';

var output = input.split(searchText).join(newText);

console.log(output); // ____-1 ____-2 ____-3

2. Regular expression based examples

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.

a) Safe approach

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 rexpression controll characters like: .*+?^=!:${}()|[]/\.

// ONLINE-RUNNER:browser;

var ESCAPE_EXPRESSION = /([.*+?^=!:${}()|\[\]\/\\])/g;

function escapeExpression(expressionText) {
  	expressionText = expressionText.replace(ESCAPE_EXPRESSION, '\\$1');
    
  	return new RegExp(expressionText, 'g'); // global searching flag
}

function replaceAll(text, what, to) {
    var whatExpression = escapeExpression(what);

    return text.replace(whatExpression, to);
}

// Usage example:

var inputText = 'This? is? my text.';

var searchText = 'is?';
var newText = '__';

var outputText = replaceAll(inputText, searchText, newText);

console.log(outputText);

Note: escapeExpression function escapes all characters from regular expression pattern.

b) Unsafe approach

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.

// ONLINE-RUNNER:browser;

var inputText = 'This? is? my text.';

var searchText = 'is\\?'; // escaped ? character
var newText = '__';

var searchRegex = new RegExp(searchText, 'g'); // global searching flag
var outputText = inputText.replace(searchRegex, newText);

console.log(outputText );

References:

  1. String.prototype.replace method - MDN Docs
  2. String.prototype.split method - MDN Docs
  3. Array.prototype.join method - MDN Docs
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join