Použití nahrazení řetězce v JavaScriptu

Toto je rychlý jednoduchý příspěvek o technikách JavaScriptu. Probereme, jak používat regulární výraz řízený replace(..) s JavaScriptem string hodnoty.

Vše string hodnoty mají replace(..) metodu, kterou mají k dispozici. Tato metoda umožňuje předat regulární výraz (nebo string který bude interpretován jako vzor pro dynamicky vytvořený regulární výraz!), aby reprezentoval to, co by mělo být nalezeno v hlavním string hodnotu pro výměnu.

Single vs Global

Zvažte:

var a = "The quick brown fox jumped over the lazy dog.";

var pattern = /the/i;

a.replace( pattern, "THE" );
// THE quick brown fox jumped over the lazy dog.

Můžete vidět pouze první "The" bylo nahrazeno. Mnoho vývojářů tuto skutečnost nechá tak, jak je, a nikdy se neptají:„Proč?“.

Je to proto, že jste nepoužili globální regulární výraz (tj. s g flag), takže JS jasně aplikuje výraz pouze v jediném kontextu. Viz:

var a = "The quick brown fox jumped over the lazy dog.";

var pattern = /the/ig; // notice "g" here now!

a.replace( pattern, "THE" );
// THE quick brown fox jumped over THE lazy dog.

Náhradník string ("THE" v našem příkladu) může obsahovat určité speciální příkazy, jako například "$1" pro vložení hodnoty prvního ( ) skupinový zápas (v našem příkladu žádný není!).

function Jako náhradník

Co kdybyste chtěli provést důmyslnější náhradu, jako je například použití velkého písmene kteréhokoli ze sady nalezených slov pomocí vzoru jako je tento?

var pattern = /quick|brown|lazy/ig;

Je zřejmé, že napevno kódování "THE" náhradník string teď to nebude fungovat!

Ale je málo známý fakt, že náhradou může být function namísto. Například:

var a = "The quick brown fox jumped over the lazy dog.";

var pattern = /quick|brown|lazy/ig;

a.replace( pattern, function replacer(match){
    return match.toUpperCase();
} );
// The QUICK BROWN fox jumped over the LAZY dog.

function náhradník získá několik argumentů. První je vždy odpovídající řetězec, což je často vše, co chcete/potřebujete. Pokud má vzor nějaké ( ) skupinový zápas(y), ty budou předány jako další argument(y). Dalším argumentem bude číselná indexovaná pozice shody ve větším řetězci.

Posledním argumentem je úplný originál string nahrazující, nikoli aktuální probíhající hodnotu řetězce, která se zpracovává.

Další místo, kde je function náhrada se hodí, pokud řetězec, kterým nahrazujete, již obsahuje speciální náhradu string sekvence příkazů, jako je instance "$1", protože return ed hodnota z funkce není interpolována jako normální string náhradník je:

var prices = {
    "pr_1": "$1.99",
    "pr_2": "$9.99",
    "pr_3": "$5.00"
};

var template = ".."; // some ecommerce page template

template.replace(
    /(<span id=")(.*?)(">)(<\/span>)/g,
    function(match,$1,$2,$3,$4){
        return $1 + $2 + $3 + prices[$2] + $4;
    }
);

Hodnota "$1.99" nemohl být použit jako string náhradní, protože "$1" by bylo interpretováno jako první shoda. Jedinou další možností je pre-escape vaše string náhradní hodnoty, například "$1,99", ale nikdo to nechce udělat, takže function náhrada je lepší.

Přehled

Regulární výraz string nahradit je výkonnější mechanismus, než za který většina vývojářů přiznává JS.

Globální /g regulární výrazy a function náhradní hodnoty jsou jen některé z užitečných, ale ne tak dobře známých funkcí vzorů regulárních výrazů a replace(..) .