La fonction de remplacement incroyablement polyvalente de JavaScript

by

La recherche et le remplacement de texte sont l’une des tâches les plus anciennes et les plus courantes en programmation, mais cela peut encore perturber les codeurs novices et expérimentés. En tant que développeur Web, vous connaissez probablement déjà JavaScript remplacer() fonction. Je pensais que moi aussi, jusqu’à ce que je doive l’utiliser récemment. J’ai vite découvert qu’il y a plus à la remplacer() fonction que je ne connaissais. Bien qu’elle ne prenne que deux arguments, cette simple signature dément remplacer Une polyvalence étonnante, car ils peuvent être de différents types, en fonction de la rigueur dont vous avez besoin. Ce didacticiel de programmation JavaScript fournira un aperçu des fonctions du couteau suisse de JS et des exemples de ses nombreuses utilisations.

JavaScript replace() : une fonction, trois modes de fonctionnement

techniquement parlant, remplacer() est une méthode publique de Chaîne de caractères objet. En tant que tel, l’objet appelant est la chaîne à rechercher, tandis que les deux arguments comprennent respectivement la sous-chaîne et la sous-chaîne de remplacement :

let newStr = str.replace(substr, newSubstr);

La remplacer() La méthode renvoie une nouvelle chaîne avec une sous-chaîne (substr) remplacé par un nouveau (newSubstr), tout en laissant la chaîne invoquante inchangée. Voici un exemple:

let source = "Can you hear the rumble? Can you hear the rumble that's calling?";
let newStr = source.replace("rumble", "thunder");
console.log(newStr);
//outputs: "Can you hear the thunder? Can you hear the rumble that's calling?"

Notez que seule la première instance de “gronder” a été changé. Remplacer effectue un remplacement sur le premier match qu’il trouve. C’est du moins ainsi qu’il se comporte dans sa forme la plus élémentaire. Il peut également accepter une sous-chaîne de recherche d’expression régulière (RegEx) pour une correspondance plus sophistiquée ainsi qu’une fonction de remplacement afin que la vraie signature ressemble davantage à ceci :

let newStr = str.replace(substr: String | RegEx, newSubstr: String | Function);

Alors, sans plus tarder, essayons ces variations !

Lis: Analyse de date à l’aide de JavaScript et d’expressions régulières

Correspondance par RegEx en JavaScript

Les expressions régulières, ou RegExes en abrégé, sont une bibliothèque de correspondance de modèles dédiée datant de 1951. Aujourd’hui, elles sont implémentées par de nombreux langages de programmation populaires modernes, y compris JavaScript. Dans le cas de remplacer(), RegExes non seulement améliore considérablement ses capacités de recherche, mais nous permet également de capturer des sous-chaînes dans le contenu correspondant pour examiner – ou même réinsérer dans – la sous-chaîne correspondante dans une position différente. Pour illustrer, imaginons que nous voulions remplacer les instructions d’importation dans un fichier par un autre code. Ceux-ci auraient un format tel que celui-ci :

@import 'filename.ext';

Dans tous les cas, le “importer”période (.) et un point-virgule de fin (;) sera présent. Cependant, le nom de fichier et l’extension peuvent différer.

Bien qu’il puisse y avoir plusieurs variantes, nous pourrions utiliser le RegEx suivant pour trouver les instructions d’importation :

/^@imports+["'](.+)["'];/gm

Si votre syntaxe RegEx est rouillée, voici une ventilation de la déclaration ci-dessus :

  • Le caret (^) correspond au début de la ligne.
  • La “@importeret point-virgule (;) au début et à la fin du modèle sont du texte littéral à faire correspondre.
  • La s+ correspond à un ou plusieurs espaces.
  • La [“‘] correspond à des guillemets simples ou doubles.
  • Le point (.) Correspond à n’importe quel caractère sauf les sauts de ligne et équivaut à [^nr].
  • La g le modificateur correspond globalement afin que toutes les occurrences soient localisées.
  • La m modificateur indique au Regex que le texte contient plusieurs lignes.

Nous pouvons vérifier que cela fonctionne en utilisant un testeur RegEx en ligne tel que regex101 :

Tutoriel JavaScript Regex

Lis: Travailler avec des expressions régulières dans vos formulaires HTML5

Capturer des groupes avec replace() en JavaScript

Notez que les noms de fichiers sont mis en surbrillance à l’aide d’une couleur différente. Ceux-ci indiquent un groupe capturé. Fidèles à leur nom, les groupes capturés collectent plusieurs jetons ensemble et créent un groupe de capture pour extraire une sous-chaîne. Ici, le nom du fichier est capturé afin que nous puissions récupérer nous-mêmes le contenu du fichier à des fins de remplacement.

Nous pourrions également échanger un nom de fichier différent en capturant le texte avant et après le nom de fichier. Les groupes capturés dans la chaîne de remplacement peuvent être référencés à l’aide du signe dollar numéroté ($) variables, où 0 $ représente l’intégralité de la chaîne correspondante et chaque groupe capturé obtient son propre numéro à partir de 1:

let newFileContents = fileContents
  .replace(/^(@imports+["'])(.+)(["'];)/gm,  "$1newfile.css$3");

Nous pouvons voir la chaîne résultante dans regex101 :

JavaScript remplace () Tutoriel

Fournir une fonction de remplacement avec replace () en JavaScript

Comme mentionné précédemment, au lieu de passer un newSubstr comme deuxième paramètre de la remplacer() méthode, vous pouvez passer une fonction de remplacement. Ce faisant, le remplacer() méthode invoquera la remplaçant() fonction pour chaque correspondance rencontrée. Il utilise ensuite le résultat de cette fonction comme chaîne de remplacement.

La remplaçant() fonction recevra les arguments suivants :

function replacer(match, p1, p2, ..., offset, string);

Voici une explication de chaque paramètre :

  • match: est la sous-chaîne correspondante.
  • p1, p2, …pn sont la nième chaîne trouvée par un groupe de capture entre parenthèses fourni par l’expression régulière.
  • décalage: est le décalage de la sous-chaîne correspondante dans la chaîne entière recherchée.
  • chaîne de caractères: est la chaîne entière en cours d’examen.

En faisant allusion au scénario envisagé précédemment, nous pourrions utiliser une fonction de remplacement pour insérer manuellement le contenu du fichier cible dans une règle CSS comme celle-ci :

.my-component-class {
    @import 'filename.ext';
}

Nous avons juste besoin de modifier notre RegEx pour inclure les accolades d’ouverture et de fermeture (et les espaces). Ensuite, en utilisant la signature de remplacement ci-dessus comme guide, nous pouvons charger le contenu du fichier cible et le réinsérer entre les accolades :

let newFileContents = readFile(rawString)
  .replace(/({s*)@imports+["'](.*)["'];(s*})/gm, 
    (match, p1, p2, p3) => p1 + loadLessFile(path.join(commonFilePath, p2)) + p3);

Le résultat est une règle imbriquée syntaxiquement correcte (bien que non indentée) :

.my-component-class {
.standard-button {
  background-color: #FFFFFF;
  color: blue;
  * {
      color: #000000;
  }
  border-radius: 0.25rem;
  border: 0.0625rem solid gray;
}
.standard-button:hover:enabled {
  background-color: fade(#000000, 4%);
  color: #000000;
  * {
      color: #000000;
  }
}

.primary-button:disabled,
.standard-button:disabled {
    opacity: 0.38;
    cursor: auto;
}
}

Nous pourrait prendre la peine d’indenter chaque ligne du texte importé, mais, puisque MOINS sont compilés en CSS normal, l’absence d’indentation ne pose aucun problème.

Lis: Outils et bibliothèques HTML, CSS et JavaScript

Réflexions finales sur la fonction JavaScript replace()

Lorsque j’aborde une tâche de recherche et de remplacement, j’aime commencer par la forme la plus simple de la fonction et n’introduire que les Regexes et/ou les remplaçant() fonction si nécessaire. La décision d’employer des Regexes est facile à prendre car elle dépend du fait que la chaîne de recherche soit fixe ou variée. Une fonction de remplacement est généralement justifiée lorsque vous n’effectuez pas une substitution directe sur des sous-chaînes correspondantes.

En savoir plus sur la programmation JavaScript et les didacticiels de développement Web.

Leave a Comment