Usando a substituição de strings em JavaScript

Esta é uma postagem simples e rápida sobre técnicas de JavaScript. Vamos abordar como usar a expressão regular acionada pelo replace(..) com JavaScript string valores.

Todos string têm um replace(..) disponível para eles. Esse método permite que o usuário passe uma expressão regular (ou um string que será interpretada como o padrão de uma expressão regular criada dinamicamente!) para representar o que deve ser encontrado na página principal do string para substituição.

Único vs. Global

Considere:

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.

O senhor pode ver que apenas o primeiro “The” foi substituído. Muitos desenvolvedores simplesmente deixam esse fato como está e nunca perguntam “Por quê?”.

Bem, é porque o senhor não usou um global (ou seja, com a expressão regular g ), portanto, claramente o JS só aplica a expressão em um único contexto. Veja:

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.

O substituto string ("THE" em nosso exemplo) pode incluir alguns comandos especiais, como “$1” para inserir o valor do primeiro ( ) (não há nenhum em nosso exemplo!).

function Como substituto

E se o senhor quisesse fazer uma substituição mais sofisticada, como, por exemplo, colocar qualquer uma das palavras encontradas em maiúsculas, usando um padrão como este?

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

Obviamente, a codificação do "THE" replacer string não funcionará agora!

Mas é um fato pouco conhecido que o substituto pode ser um function em vez disso. Por exemplo:

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.

O function recebe vários argumentos. O primeiro é sempre a string correspondente, que geralmente é tudo o que o senhor deseja/precisa. Se o padrão tiver algum ( ) esses serão passados como o(s) próximo(s) argumento(s). O próximo argumento será a posição numérica indexada da correspondência na cadeia maior.

O argumento final é o argumento completo do original string que está sendo substituído, e não o valor atual da cadeia de caracteres em andamento que está sendo processado.

Outro lugar onde o function é útil se a cadeia de caracteres que o senhor está substituindo já tiver algum dos substituidores especiais string como, por exemplo, “$1”, porque o comando returned da função não é interpolado como o valor regular do string regular é:

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;
    }
);

O valor "$1.99" não poderia ter sido usado como um string porque “$1” teria sido interpretado como a primeira correspondência. A única outra opção é fazer o pré-escape de seu string como “$$1.99”, mas ninguém quer fazer isso, então o function é melhor.

Resumo

Expressão regular string replace é um mecanismo mais avançado do que a maioria dos desenvolvedores atribui ao JS.

Global /g expressões regulares e function valores de substituição são apenas alguns dos recursos úteis, mas não tão conhecidos, dos padrões de expressão regular e replace(..).