JavaScript - jak zamienić wszystkie wystąpienia znaku w ciągu znaków (ang. string)

W tym artykule przyjrzymy się różnym sposobom zastępowania wszystkich wystąpień tekstu w ciągu znaków w JavaScript.

Najczęstszym problemem w JavaScript jest brak metody replaceAll.

// ONLINE-RUNNER:browser;

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

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

Bardziej szczegółowe i pogrupowane rozwiązania znajdują się poniżej.

1. Przykład podziału i łączenia tekstu

Ta sekcja pokazuje, jak podzielić ciąg według jakiegoś tekstu, a następnie połączyć go, wstawiając nowy tekst między nimi.

// ONLINE-RUNNER:browser;

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

var searchText = 'tekst';
var newText = '____';

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

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

2. Przykłady oparte na wyrażeniach regularnych

W tej sekcji pokazano, jak zamienić wszystkie wystąpienia tekstu na obiekt RexExp. Domyślnie metoda replace używana z wyrażeniem regularnym zastępuje tylko jedno wystąpienie tekstu. Rozwiązaniem tego problemu jest dodanie flagi dla obiektu wyrażenia.

a) Bezpieczne podejście

Ten przykład pokazuje, jak zamienić wszystkie wystąpienia dowolnego tekstu. Takie podejście jest zalecane, jeśli zastępowany tekst może zawierać znaki takie jak: .*+?^=!:${}()|[]/\.

// ONLINE-RUNNER:browser;

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

function escapeExpression(expressionText) {
  	expressionText = expressionText.replace(ESCAPE_EXPRESSION, '\\$1');

  	return new RegExp(expressionText, 'g'); // globalna flaga wyszukiwania
}

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

    return text.replace(whatExpression, to);
}

// Przykład użycia:

var inputText = 'To? jest? mój tekst.';

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

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

console.log(outputText);

Uwaga: funkcja escapeExpression usuwa wszystkie znaki z wzorca wyrażenia regularnego.

b) Niebezpieczne podejście

Ten przykład pokazuje, jak zamienić wszystkie wystąpienia tekstu. Jest zalecane tylko wtedy, gdy wszystkie zastępowane znaki zostały zamienione z \\. Główną zaletą tego podejścia jest brak niepotrzebnego przetwarzania zastępowanego tekstu.

// ONLINE-RUNNER:browser;

var inputText = 'To? jest? mój tekst.';

var searchText = 'jest\\?'; // zamieniony znak "?"
var newText = '__';

var searchRegex = new RegExp(searchText, 'g'); // globalna flaga wyszukiwania
var outputText = inputText.replace(searchRegex, newText);

console.log(outputText );

Zobacz również

• String.prototype.replace  - MDN Docs
• String.prototype.split - MDN Docs
• Array.prototype.join - MDN Docs