La méthode JS string replace()

Introduction

La méthode string replace() est généralement apprise par les étudiants Javascript au début de leurs études, mais seule la forme d'utilisation de base est couverte à ce moment-là, et le sujet n'est généralement pas revisité plus tard. En conséquence, de nombreux développeurs Javascript ne l'utilisent que sous sa forme la plus basique.

Utilisation de base

L'utilisation de base de replace() consiste à lui transmettre deux chaînes. La première est la chaîne qui est remplacée et la seconde est la chaîne qui est utilisée pour la remplacer.

const strOriginal = "The quick brown fox jumps over the lazy dog.";
const strReplaced = strOriginal.replace("jumps", "flies");
console.log(strReplaced);

Cela produit cette sortie :

The quick brown fox flies over the lazy dog.

Expressions régulières

Au lieu de fournir une chaîne comme premier paramètre à replace(), il est également possible de fournir une expression régulière.

const strOriginal = "The PIN is 1234."
const strReplaced = strOriginal.replace(/\b\d{4}\b/, "<redacted>");
console.log(strReplaced);//The PIN is <redacted>.

Le d correspond à un chiffre et le {4} correspond exactement à 4 d'entre eux. Le b au début et à la fin correspond aux limites. Cela empêche la correspondance de parties de nombres de plus de 4 chiffres. Dans le monde réel, vous aurez peut-être besoin d'un code supplémentaire pour distinguer la séquence de 4 chiffres d'une partie d'un numéro de téléphone ou d'un numéro de carte de crédit, mais je l'ai laissé de côté, car il ne s'agit pas d'un didacticiel d'expression régulière.

Fonction de remplacement

Le deuxième paramètre de la méthode replace() peut être une fonction. Tout ce que cette fonction renvoie est utilisé pour remplacer le texte correspondant spécifié dans le premier paramètre. Cela fonctionne à la fois avec les chaînes et les expressions régulières fournies comme premier paramètre.

Lorsque le premier paramètre de replace() est une chaîne ou une expression régulière sans groupes de capture, la fonction de remplacement reçoit 3 paramètres dans l'ordre suivant :

1. texte correspondant
2. position du match
3. chaîne complète originale

Si le premier paramètre de replace() est une expression régulière avec des groupes de capture, le deuxième et tous les paramètres suivants, à l'exception des deux derniers, seront les captures. L'avant-dernier sera la position de la première capture et le paramètre final sera la chaîne complète d'origine.

Si une expression régulière est utilisée avec l'indicateur global, la fonction est appelée une fois pour chaque correspondance trouvée.

La fonction de remplacement est moins souvent accompagnée d'une chaîne comme premier paramètre de replace(), car une chaîne est une valeur constante, il est donc généralement possible de pré-calculer son substitut. Cependant, il peut être utilisé avec une chaîne pour faire quelque chose comme ceci :

const names = ["birds", "dogs", "cats", "pandas"];
const str = "We hold these truths to be self-evident, that all <ANIMALS> are created equal."
const strReplaced = str.replace("<ANIMALS>",
    ()=> names[Math.floor(Math.random() * names.length)]
);
console.log(strReplaced);

Ceci remplace "" avec une chaîne sélectionnée au hasard dans le tableau des noms pour produire une phrase aléatoire comme celle-ci :

We hold these truths to be self-evident, that all dogs are created equal.

Combinaison de RegEx avec la fonction de remplacement

Le véritable pouvoir de la fonction replacer vient de sa combinaison avec une expression régulière comme premier paramètre de replace(). Étant donné que les expressions régulières peuvent correspondre à des modèles, elles peuvent correspondre à des chaînes qui ne sont pas connues à l'avance. Une fonction peut donc être nécessaire pour gérer le texte correspondant afin de produire son remplacement.

Voici un exemple de conversion d'un étui serpent en étui chameau :

const snakeStr = "my_favorite_variable_name";
function snakeToCamelCase(str) {
    return str.replace(/_(\w)/g, function(_, letter) {
        return letter.toUpperCase();
    });
}
console.log(snakeToCamelCase(snakeStr)); //myFavoriteVariableName

Le w correspond à un seul caractère du texte. Il vient après un trait de soulignement dans l'expression régulière, il correspondra donc à la première lettre après un trait de soulignement. Les parenthèses sont utilisées pour créer un groupe de capture qui contient uniquement cette lettre sans le trait de soulignement dans la chaîne. (Ce serait simple de prendre simplement le deuxième caractère de la correspondance, mais je voulais illustrer les groupes de capture.) Cette lettre est reçue par la fonction de remplacement comme deuxième paramètre, puis elle est mise en majuscule et renvoyée en remplacement de la sous-chaîne entière composée à l'origine d'un trait de soulignement et d'une lettre, cela efface donc le trait de soulignement et met en majuscule la lettre qui le suit.

Voici un autre exemple qui convertit les codes de couleur hexadécimaux en couleurs RVB.

const css = `body{
    background-color: #88FF00;
    color: #0d2651;
}`;
const hex2RGB = str => str.replace(/#[0-9A-F]{6}/ig,(hex)=>{
    return "rgb(" +
        //skip first character which is #
        parseInt(hex.substring(1,3), 16) +
        ", " +
        parseInt(hex.substring(3,5), 16) +
        ", " +
        parseInt(hex.substring(5,7), 16) +
        ")";
});
console.log(hex2RGB(css));

Le résultat résultant est :

body{
    background-color: rgb(136, 255, 0);
    color: rgb(13, 38, 81);
}

L'expression régulière correspond au # suivi immédiatement d'exactement 6 chiffres hexadécimaux, qui sont définis comme les caractères 0 à 9 et A à F. L'indicateur i est utilisé pour ignorer la casse, il fonctionne donc à la fois pour les majuscules et les minuscules. La fonction de remplacement prend les sous-chaînes du code hexadécimal et les analyse pour produire des nombres décimaux, et ces nombres sont placés entre "rgb(" et ")" pour produire les couleurs rgb().

Conclusion

Il existe de nombreuses façons de modifier une chaîne existante, mais l'utilisation de la méthode replace() est souvent un bon choix lorsque l'objectif est de remplacer des sous-chaînes en fonction du contenu plutôt que de la position. Sans cela, la solution typique consiste d'abord à rechercher la position d'une sous-chaîne, puis à diviser la chaîne à ce stade et à concaténer avec un substitut, ce qui n'est pas efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!