Languages
[Edit]
EN

JavaScript - how to replace all occurrences of string?

12 points
Created by:
AnnLen
1795

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
Hey ūüĎč
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.