Maîtriser replace() en JavaScript : Guide complet avec les expressions régulières, les fonctions de rappel et les meilleures pratiques

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript est l’un des langages de programmation les plus utilisés dans le développement web. En particulier, la manipulation de chaînes est une tâche courante lors de la gestion des entrées utilisateur ou du traitement des données. Parmi celles-ci, la méthode replace() est connue comme un outil puissant qui rend le remplacement de chaînes simple et efficace. Dans cet article, nous expliquerons en détail la méthode replace() de JavaScript, des bases aux techniques avancées. Nous couvrirons non seulement l’utilisation de base mais aussi les remplacements avancés utilisant des expressions régulières et des exemples pratiques, ce qui en fait un outil utile pour les débutants et les développeurs intermédiaires.

2. Bases de la méthode replace()

Qu’est-ce que la méthode replace() ?

La méthode replace() est une fonction intégrée à JavaScript utilisée pour remplacer des parties spécifiques d’une chaîne par une autre chaîne. Avec cette méthode, vous pouvez modifier ou transformer efficacement les données de chaîne.

Syntaxe

string.replace(pattern, replacement)

• pattern : La chaîne ou l’expression régulière à rechercher.
• replacement : La chaîne de remplacement, ou une fonction de rappel.

Utilisation de base

L’exemple suivant démontre un remplacement de chaîne simple :

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

Dans ce code, la chaîne « world » est remplacée par « JavaScript. »

Notes

1. replace() ne remplace que la première correspondance.
2. Si vous voulez remplacer toutes les correspondances, vous devez utiliser une expression régulière avec le drapeau g.

3. Remplacement avancé avec des expressions régulières

Qu’est-ce qu’une expression régulière ?

Les expressions régulières sont des outils puissants utilisés pour représenter des motifs de chaînes. En JavaScript, vous pouvez utiliser des regex pour effectuer facilement des recherches et des remplacements complexes.

Exemple : Remplacement avec des expressions régulières

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

Types de drapeaux

• g : Remplacement global (remplace toutes les correspondances)
• i : Remplacement insensible à la casse
• m : Mode multiligne

Exemple : Remplacement insensible à la casse

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. Remplacement de plusieurs occurrences

Remplacement de toutes les correspondances

Pour remplacer toutes les occurrences correspondantes, utilisez le drapeau g dans votre regex.

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

Technique : Remplacer plusieurs chaînes différentes en une seule fois

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

Cette approche vous permet de remplacer plusieurs motifs en une seule fois, améliorant la lisibilité du code.

5. Remplacement dynamique avec des fonctions de rappel

Qu’est-ce qu’une fonction de rappel ?

Une fonction de rappel est invoquée pendant le processus de remplacement et peut utiliser les informations de correspondance pour personnaliser le résultat.

Exemples de remplacement dynamique

1. Échange de l’ordre des chaînes

let text = "Tanaka, Taro";
let result = text.replace(/(w+), (w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. Conversion du format de date

let date = "2024-12-25";
let formattedDate = date.replace(/(d{4})-(d{2})-(d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. Gestion des caractères spéciaux et des séquences d’échappement

Quels sont les caractères spéciaux ?

Dans les expressions régulières, certains caractères sont considérés comme des métacaractères avec des significations spéciales. Pour les utiliser littéralement dans les recherches ou les remplacements, vous devez les échapper avec des séquences d’échappement.

Remplacement de chaînes contenant des caractères spéciaux

Exemple 1 : Remplacement d’une chaîne contenant un point

let text = "www.example.com";
let result = text.replace(/./g, "-");
console.log(result); // "www-example-com"

Exemple 2 : Suppression du signe dollar

let price = "$1,000";
let result = price.replace(/$/g, "");
console.log(result); // "1,000"

Remplacement des caractères d’échappement HTML

Exemple : Échappement des balises HTML

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. Exemples pratiques et techniques avancées

Conversion des sauts de ligne en balises
Tags

let text = "HellonWorldnJavaScript";
let result = text.replace(/n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

Manipulation des paramètres d’URL

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

Nettoyage des entrées utilisateur

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. Remarques et bonnes pratiques

Seule la première correspondance est remplacée

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

Faites attention à la sensibilité à la casse

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

Évitez les échappements manquants pour les caractères spéciaux

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[]]/g, "$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. Conclusion

Récapitulatif de l’article

• Utilisation de base : Explication de la syntaxe et des exemples simples de remplacement de la méthode replace().
• Applications des expressions régulières : Apprentissage de l’utilisation des expressions régulières et des drapeaux pour des remplacements avancés.
• Fonctions de rappel : Couverture de la façon d’effectuer des remplacements dynamiques avec des exemples pratiques.
• Exemples pratiques : Introduction de techniques utiles dans des applications réelles telles que la manipulation d’URL et la désinfection.
• Bonnes pratiques : Explication détaillée des notes et des considérations de performance.

Réflexions finales

La méthode JavaScript replace() est un outil polyvalent qui peut être appliqué des scénarios de base aux scénarios avancés. Nous continuerons à fournir des informations utiles sur JavaScript, alors restez à l’écoute !