Méthode replace() de JavaScript expliquée : bases, expressions régulières et exemples pratiques

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

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

1. Introduction

JavaScript est l’un des langages de programmation les plus largement utilisés dans le développement web. En particulier, la manipulation de chaînes de caractères est une fonctionnalité fréquemment employée lors du traitement des entrées utilisateur et du traitement des données. Parmi ces fonctionnalités, la méthode replace() est reconnue comme un outil puissant qui permet d’effectuer facilement des opérations de remplacement de chaînes.

Dans cet article, nous expliquerons en détail la méthode JavaScript replace(), des bases aux utilisations avancées. En plus des exemples fondamentaux, nous aborderons également les remplacements avancés à l’aide d’expressions régulières et des cas d’utilisation concrets du monde réel. Ce contenu est conçu pour être utile aux débutants comme aux 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 de JavaScript utilisée pour remplacer des parties spécifiques d’une chaîne par une autre chaîne. En utilisant cette méthode, vous pouvez éditer et 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 montre un remplacement simple de chaîne.

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 ».

Remarques importantes

1. replace() ne remplace que la première occurrence correspondante.
2. Pour remplacer toutes les occurrences correspondantes, vous devez utiliser une expression régulière avec le drapeau g.

3. Remplacement avancé à l’aide d’expressions régulières

Qu’est‑ce que les expressions régulières ?

Les expressions régulières sont des outils puissants pour décrire des motifs de chaînes. En JavaScript, les expressions régulières vous permettent d’effectuer facilement des correspondances de motifs complexes et des opérations de remplacement.

Exemples de 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 avancé : 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

Remplacer toutes les correspondances

Pour remplacer toutes les occurrences correspondantes dans une chaîne, utilisez le drapeau g dans une expression régulière.

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

Technique pour 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 simultanément tout en améliorant la lisibilité du code.

5. Remplacement dynamique à l’aide de fonctions de rappel

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

Une fonction de rappel est invoquée pendant le processus de remplacement et vous permet de personnaliser l’opération en utilisant les informations de la correspondance actuelle.

Exemples de remplacement dynamique

1. Réorganisation 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 de formats 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 ont des significations particulières en tant que méta‑caractères. Pour utiliser ces caractères littéralement dans des opérations de recherche ou de remplacement, vous devez employer des séquences d’échappement.

Remplacer des chaînes contenant des caractères spéciaux

Exemple 1 : Remplacer une chaîne contenant un point

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

Exemple 2 : Supprimer un signe dollar

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

Remplacer les caractères d’échappement HTML

Exemple : Échapper les 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. Cas d’utilisation pratiques et techniques avancées

Convertir les sauts de ligne en balises

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

Manipuler les 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"

Assainir les 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 importantes et bonnes pratiques

Sachez que 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."

N’oubliez pas d’échapper 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ésumé de l’article

• Utilisation de base : Explication de la syntaxe et d’exemples simples de la méthode replace().
• Applications d’expressions régulières : Couverture de l’utilisation des expressions régulières et des drapeaux pour des opérations de remplacement avancées.
• Fonctions de rappel : Démonstration de techniques de remplacement dynamique avec des exemples pratiques.
• Exemples pratiques : Introduction de techniques utiles comme la manipulation d’URL et l’assainissement des entrées.
• Bonnes pratiques : Explication des mises en garde importantes et des considérations liées aux performances.

Réflexions finales

La méthode JavaScript replace() est un outil polyvalent et puissant qui peut être utilisé efficacement, des scénarios simples aux plus avancés. Nous continuerons à fournir du contenu utile lié à JavaScript, alors restez à l’écoute.