Top community members
All Wiki Articles Create Wiki Article

Many years me and my friends we were volunteers on my university doing programming classes for young people.

I got main conclusion: Young people are awesome, especially students, because they always bring new and fresh ideas :)
* I loved to do it but my time is limited

  I decided to create something that will help millions of students

Now I am here

co-founder

JavaScript - how to replace all occurrences of string?

0 contributions
12 points

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
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more