Fixed weird code example on the french `split()` page (#399)

* Fixed weird code example on the french `split()` page
* UPDATE: Realignment of the content from the US version

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>

1 files changed, 103 insertions, 129 deletions

diff --git a/files/fr/web/javascript/reference/global_objects/string/split/index.html b/files/fr/web/javascript/reference/global_objects/string/split/index.html
index e52248ddec..1501e82a17 100644
--- a/files/fr/web/javascript/reference/global_objects/string/split/index.html
+++ b/files/fr/web/javascript/reference/global_objects/string/split/index.html
@@ -2,71 +2,89 @@
 title: String.prototype.split()
 slug: Web/JavaScript/Reference/Global_Objects/String/split
 tags:
-  - Expressions rationnelles
   - JavaScript
-  - Méthode
+  - Method
   - Prototype
   - Reference
+  - Regular Expressions
   - String
 translation_of: Web/JavaScript/Reference/Global_Objects/String/split
 original_slug: Web/JavaScript/Reference/Objets_globaux/String/split
 ---
 <div>{{JSRef}}</div>
 
-<p>La méthode <code><strong>split()</strong></code> permet de diviser une chaîne de caractères à partir d'un séparateur pour fournir un tableau de sous-chaînes.</p>
+<p>La méthode <strong><code>split()</code></strong> divise une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String">chaîne de caractères</a> en une liste ordonnée de sous-chaînes, place ces sous-chaînes dans un tableau et retourne le tableau. La division est effectuée en recherchant un motif ; où le motif est fourni comme premier paramètre dans l'appel de la méthode.</p>
 
-<div>{{EmbedInteractiveExample("pages/js/string-split.html")}}</div>
+<div>{{EmbedInteractiveExample("pages/js/string-split.html", "taller")}}</div>
 
-<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+<h2 id="syntax">Syntaxe</h2>
 
-<h2 id="Syntaxe">Syntaxe</h2>
+<pre class="syntaxbox"><var>str</var>.split([<var>separator</var>[, limit]])</pre>
 
-<pre class="syntaxbox notranslate"><var>str</var>.split([<var>séparateur</var>[, qtéMax]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
+<h3 id="parameters">Paramètres</h3>
 
 <dl>
- <dt><code>séparateur</code> {{optional_inline}}</dt>
- <dd>
- <p>Paramètre optionnel qui définit le ou les caractères à utiliser pour scinder la chaîne. Le <code>séparateur</code> est considéré comme une chaîne ou une {{jsxref("RegExp", "expression rationnelle", "", 1)}}. Si le <code>séparateur</code> est omis ou qu'il n'apparaît pas dans la chaîne, le tableau retourné contiendra un unique élément contenant la chaîne entière. Si le <code>séparateur</code> est une chaîne vide, la chaîne <code>str</code> sera convertie en un tableau dont les éléments seront les caractères de la chaîne. Si le <code>séparateur</code> contient un ou plusieurs caractères, la chaîne de caractères entière doit être trouvée pour effectuer une césure.</p>
-
- <p class="warning"><strong>Attention !</strong> Si c'est la chaîne vide qui est utilisée comme séparateur, la chaîne ne sera pas découpée entre chaque caractère visible (<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grapheme cluster</a>) mais entre chaque codet UTF-16 et les paires de <em><a href="http://unicode.org/faq/utf_bom.html#utf16-2">surrogates</a></em> seront détruites.</p>
- </dd>
- <dt><code>qtéMax</code> {{optional_inline}}</dt>
- <dd>Paramètre optionnel. Un entier définissant la limite sur le nombre de sous-chaînes à retourner. La méthode <code>split</code> scindera toujours la chaîne à partir du <code>séparateur</code>, mais le tableau retourné contiendra au plus <code>qtéMax</code> sous-chaînes.</dd>
+  <dt><code>separator</code> <span class="badge inline optional">Facultatif</span></dt>
+  <dd>
+    <p>Le motif décrivant où chaque séparation doit se produire. Le <code>separator</code> peut être une simple chaîne de caractères ou peut être une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp">expression régulière</a>.</p>
+
+    <ul>
+      <li>Le cas le plus simple est celui où <code>separator</code> n'est qu'un seul caractère ; il est utilisé pour diviser une chaîne délimitée. Par exemple, une chaîne contenant des valeurs séparées par des tabulations (TSV) pourrait être analysée en passant un caractère de tabulation comme séparateur, comme ceci : <code>myString.split("\t")</code>.</li>
+      <li>Si <code>separator</code> contient plusieurs caractères, cette séquence de caractères entière doit être trouvée afin de diviser la chaîne.</li>
+      <li>Si <code>separator</code> est omis ou n'apparaît pas dans la chaîne <code>str</code>, le tableau retourné contient un élément constitué de la chaîne entière.</li>
+      <li>Si <code>separator</code> apparaît au début (ou à la fin) de la chaîne, il a quand même l'effet de division. Le résultat est une chaîne vide (c'est-à-dire de longueur nulle), qui apparaît à la première (ou dernière) position du tableau retourné.</li>
+      <li>Si <code>separator</code> est une chaîne vide (<code>""</code>), la chaîne <code>str</code> est convertie en un tableau de chacun de ses "caractères" UTF-16.</li>
+    </ul>
+
+    <div class="notecard warning">
+      <p><b>Attention :</b></p>
+      <p>Lorsque une chaîne vide (<code>""</code>) est utilisée comme séparateur, la chaîne n'est <strong>pas</strong> divisée par des <em>caractères perçus par l'utilisateur</em> (<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grappes de graphèmes</a>) ou des caractères unicodes (codepoints), mais par des unités de code UTF-16. Cela détruit les <a href="http://unicode.org/faq/utf_bom.html#utf16-2">paires de substituts</a>. Voir <a href="https://stackoverflow.com/a/34717402">« Comment obtenir une chaîne de caractères vers un tableau de caractères en JavaScript ? » sur StackOverflow</a>.</p>
+    </div>
+  </dd>
+  <dt><code>limit</code> <span class="badge inline optional">Facultatif</span></dt>
+  <dd>
+    <p>Un nombre entier non négatif spécifiant une limite sur le nombre de sous-chaînes à inclure dans le tableau. S'il est fourni, il divise la chaîne de caractères à chaque occurrence du <code>separator</code> spécifié, mais s'arrête lorsque la <code>limit</code> (limite) d'entrées a été atteinte dans le tableau. Tout texte restant n'est pas du tout inclus dans le tableau.</p>
+
+    <ul>
+      <li>Le tableau peut contenir moins d'entrées que la <code>limit</code> (limite), si la fin de la chaîne de caractères est atteinte avant que la limite ne soit atteinte.</li>
+      <li>Si <code>limit</code> est paramétré sur <code>0</code>, un tableau vide <code>[]</code> est retourné.</li>
+    </ul>
+  </dd>
 </dl>
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+<h3 id="return_value">Valeur de retour</h3>
+
+<p>Un tableau (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a>) qui contient les fragments de la chaîne de caractères, découpée en fonction du séparateur indiqué.</p>
 
-<p>Un tableau ({{jsxref("Array")}}) qui contient les fragments de la chaîne appelante, découpée en fonction du séparateur indiqué.</p>
+<h2 id="description">Description</h2>
 
-<h2 id="Description">Description</h2>
+<p>Lorsqu'il est trouvé, <code>separator</code> est supprimé de la chaîne de caractère, et les sous-chaînes sont retournées dans un tableau.</p>
 
-<p>Lorsqu'il est trouvé, le <code>séparateur</code> est supprimé de la chaîne et les sous-chaînes sont retournées dans un tableau. Si le <code>séparateur</code> est omis, le tableau contiendra un élément correspondant à la chaîne courante. Si le <code>séparateur</code> est une chaîne vide, la chaîne courante est convertie en un tableau composé des caractères de la chaîne. Si le séparateur est uniquement présent au début et/ou à la fin de la chaîne, le tableau contiendra une chaîne vide comme premier et/ou dernier élément (si on utilise cette méthode sur une chaîne qui ne contient que le séparateur, le tableau obtenu aura deux éléments qui seront chacun une chaîne vide).</p>
+<p>Si <code>separator</code> est une expression régulière avec des parenthèses de capture, alors chaque fois que <code>separator</code> correspond, les résultats (y compris tout résultat <code>undefined</code>) des parenthèses de capture sont joints au tableau de sortie.</p>
 
-<p>Si le <code>séparateur</code> est une expression rationnelle qui contient des parenthèses groupantes, les résultats (incluant tout résultat indéfini) des groupes iront alors dans le tableau retourné à chaque fois qu'une correspondance du <code>séparateur</code> sera trouvée. Cependant, tous les navigateurs ne supportent pas cette possibilité.</p>
+<p>Si le séparateur est un tableau, alors ce tableau est converti en une chaîne de caractères et est utilisé comme séparateur.</p>
 
-<p>La méthode <code>split()</code> ne modifie pas le tableau courant, elle renvoie un nouveau tableau.</p>
+<h2 id="examples">Exemples</h2>
 
-<p>Lorsque le séparateur fourni est un tableau, le tableau est automatiquement converti en une chaîne de caractères et c'est cette chaîne qui est utilisée comme séparateur.</p>
+<h3 id="using_split">Utiliser <code>split()</code></h3>
 
-<p>{{Note("Quand la chaîne est vide, <code>split()</code> retourne un tableau contenant une chaîne vide, plutôt qu'un tableau vide. Si la chaîne et le séparateur sont tous les deux des chaînes vides, un tableau vide sera renvoyé.")}}</p>
+<p>Lorsque la chaîne de caractères est vide, <code>split()</code> retourne un tableau contenant une chaîne de caractères vide, plutôt qu'un tableau vide. Si la chaîne et le séparateur sont tous deux des chaînes vides, un tableau vide est retourné.</p>
 
-<h2 id="Exemples">Exemples</h2>
+<pre class="brush: js">const myString = ''
+const splits = myString.split()
 
-<h3 id="Utiliser_split">Utiliser <code>split()</code></h3>
+console.log(splits)
+
+// ↪ [""]</pre>
 
 <p>L'exemple suivant définit une fonction qui divise une chaîne en un tableau de chaînes selon un délimiteur spécifié. Après la coupe de la chaîne, la fonction affiche des messages indiquant la chaîne initiale (avant la coupe), le délimiteur utilisé, le nombre d'éléments dans le tableau, et les éléments du tableau retourné.</p>
 
-<pre class="brush: js notranslate">function splitString(stringToSplit, separator) {
+<pre class="brush: js">function splitString(stringToSplit, separator) {
   var arrayOfStrings = stringToSplit.split(separator);
 
-  console.log('La chaine d\'origine est : "' + stringToSplit + '"');
-  console.log('Le délimiteur est : "' + separator + '"');
-  console.log("Le tableau comporte " + arrayOfStrings.length + " elements : ");
-
-  for (var i=0; i &lt; arrayOfStrings.length; i++)
-    print(arrayOfStrings[i] + " / ");
+  console.log(`La chaine d'origine est : ${stringToSplit}`);
+  console.log(`Le délimiteur est : ${separator}`);
+  console.log(`Le tableau comporte ${arrayOfStrings.length} elements : `, arrayOfStrings.join(' / '));
 }
 
 var tempestString = "Oh brave new world that has such people in it.";
@@ -82,7 +100,7 @@ splitString(monthString, virgule);
 
 <p>Cet exemple produira la sortie suivante :</p>
 
-<pre class="brush: js notranslate">La chaine d'origine est : "Oh brave new world that has such people in it."
+<pre class="brush: js">La chaine d'origine est : "Oh brave new world that has such people in it."
 Le délimiteur est : " "
 Le tableau comporte 10 elements : Oh / brave / new / world / that / has / such / people / in / it. /
 
@@ -95,146 +113,102 @@ Le délimiteur est : ","
 Le tableau comporte 12 elements : Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /
 </pre>
 
-<h3 id="Supprimer_les_espaces_dune_chaîne">Supprimer les espaces d'une chaîne</h3>
+<h3 id="removing_spaces_from_a_string">Supprimer les espaces d'une chaîne</h3>
 
 <p>Dans l'exemple suivant, <code>split</code> recherche zéro ou plusieurs espaces suivis d'un point-virgule, lui-même suivi par zéro ou plus espaces. Lorsque ce « motif » est trouvé, cela supprime celui-ci de la chaîne. <code>nameList</code> est le tableau retourné du résultat de <code>split</code>.</p>
 
-<pre class="brush: js notranslate">var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
+<pre class="brush: js">var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
 
 console.log(names);
 
 var re = /\s*(;|$)\s*/;
 var nameList = names.split(re);
 
-console.log(nameList);
-</pre>
+console.log(nameList);</pre>
 
 <p>Ceci affichera deux lignes dans la console ; la première ligne correspondant à la chaîne d'origine, et la seconde au tableau de résultats.</p>
 
-<pre class="brush: js notranslate">Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
-["Harry Trump","Fred Barney","Helen Rigby","Bill Abel","Chris Hand"]
-</pre>
+<pre class="brush: js">Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+["Harry Trump","Fred Barney","Helen Rigby","Bill Abel","Chris Hand"]</pre>
 
-<h3 id="Retourner_un_nombre_limité_de_sous-chaînes">Retourner un nombre limité de sous-chaînes</h3>
+<h3 id="returning_a_limited_number_of_splits">Retourner un nombre limité de sous-chaînes</h3>
 
 <p>Dans l'exemple suivant, <code>split()</code> recherche des espaces dans une chaîne et retourne les 3 premières sous-chaînes qui correspondent.</p>
 
-<pre class="brush: js notranslate">var myString = "Hello World. How are you doing?";
+<pre class="brush: js">var myString = "Hello World. How are you doing?";
 var splits = myString.split(" ", 3);
 
-console.log(splits);
-</pre>
+console.log(splits);</pre>
 
 <p>Ce script affichera :</p>
 
-<pre class="brush: js notranslate">["Hello", "World.", "How"]
-</pre>
+<pre class="brush: js">["Hello", "World.", "How"]</pre>
 
-<h3 id="Découper_une_expression_rationnelle_-_Parenthèses_capturantes">Découper une expression rationnelle - Parenthèses capturantes</h3>
+<h3 id="splitting_with_a_regexp_to_include_parts_of_the_separator_in_the_result">Découper une expression rationnelle - Parenthèses capturantes</h3>
 
 <p>Si le paramètre <code>séparateur</code> est une expression rationnelle qui contient des parenthèses de capture, les résultats seront retournés dans le tableau.</p>
 
-<pre class="brush: js notranslate">var myString = "Hello 1 word. Sentence number 2.";
-var splits = myString.split(/(\d)/); /* Ce motif correspond à un chiffre et est équivalent à [0-9] */
+<pre class="brush: js">var myString = "Hello 1 word. Sentence number 2.";
+var splits = myString.split(/(\d)/);
 
-console.log(splits);
-</pre>
+console.log(splits);</pre>
 
 <p>Ce script affichera :</p>
 
-<pre class="brush: js notranslate">Hello ,1, word. Sentence number ,2,.
-</pre>
-
-<h3 id="Découper_une_chaîne_avec_un_tableau_comme_séparateur">Découper une chaîne avec un tableau comme séparateur</h3>
+<pre class="brush: js">[ "Hello ", "1", " word. Sentence number ", "2", "." ]</pre>
 
-<pre class="brush: js notranslate">var maChaine = "Ceci|est|un|test";
-var morceaux = maChaine.split(['|']);
+<div class="notecard note">
+  <p><b>Note :</b></p>
+  <p><code>\d</code> correspond à la <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">classe de caractères</a> pour les chiffres compris entre 0 et 9.</p>
+</div>
 
-console.log(morceaux); // ["Ceci", "est", "un", "test"]
+<h3 id="reversing_a_string_using_split">Inverser une chaîne en utilisant <code>split()</code></h3>
 
-var maChaine2 = "ca,bc,a,bca,bca,bc";
-var morceaux2 = maChaine2.split(["a", "b"]);
+<div class="warning">
+  <p>Ce n'est pas une façon robuste d'inverser une chaîne :</p>
 
-console.log(morceaux2); // ["c", "c,", "c", "c", "c"]
-</pre>
+  <pre class="brush: js example-bad">const str = 'asdfghjkl'
+const strReverse = str.split('').reverse().join('')
+// 'lkjhgfdsa'
 
-<h3 id="Inverser_une_chaîne_en_utilisant_split">Inverser une chaîne en utilisant <code>split()</code></h3>
+// split() retourne un tableau sur lequel reverse() et join() peuvent être appliqués.</pre>
 
-<pre class="brush: js notranslate">var str = 'asdfghjkl';
-var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
-// split renvoie un tableau sur lequel on peut appliquer reverse
-// enfin on utilise join pour assembler le tout.</pre>
+  <p>Cela ne fonctionne pas si la chaîne de caractères contient des groupes de graphèmes, même en utilisant une division sensible aux unicodes. (Utilisez, par exemple, <a href="https://github.com/mathiasbynens/esrever">esrever</a> à la place).</p>
 
-<div class="note">
-<p><strong>Note :</strong> Si on souhaite tester si la chaîne courante est un palindrome, on pourra utiliser l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}.</p>
-</div>
-
-<p>Attention, cela ne fonctionne pas si la chaîne de caractères contient des groupes de graphèmes, même lorsqu'on utilise une méthode de découpage sensible à Unicode.</p>
-
-<pre class="brush: js notranslate">var str = 'résumé';
-var strReverse = str.split(/(?:)/u).reverse().join('');
-// =&gt; "émusér"
+  <pre class="brush: js example-bad">const str = 'résumé'
+const strReverse = str.split(/(?:)/u).reverse().join('')
+// =&gt; "́emuśer"
 </pre>
 
-<p>On pourra utiliser une bibliothèque (cf. <a href="https://github.com/mathiasbynens/esrever">esrever</a>) si besoin.</p>
+  <p><strong>Bonus :</strong> utiliser l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators"><code>===</code></a> pour tester si la chaîne d'origine est un palindrome.</p>
+</div>
 
-<h2 id="Spécifications">Spécifications</h2>
+<h2 id="specifications">Spécifications</h2>
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
-
-<p>{{Compat("javascript.builtins.String.split")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.charAt()")}}</li>
- <li>{{jsxref("String.prototype.indexOf()")}}</li>
- <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
- <li>{{jsxref("Array.prototype.join()")}}</li>
-</ul>
-
-<p>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}} {{Spec2('ES6')}} Définition initiale au sein d'un standard ECMA.</p>
-
-<h2 id="Compatibilité_des_navigateurs_2">Compatibilité des navigateurs</h2>
-
-<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
 <p>{{Compat("javascript.builtins.String.split")}}</p>
 
-<h2 id="Voir_aussi_2">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a></li>
+  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charAt"><code>String.prototype.charAt()</code></a></li>
+  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf"><code>String.prototype.indexOf()</code></a></li>
+  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf"><code>String.prototype.lastIndexOf()</code></a></li>
+  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join"><code>Array.prototype.join()</code></a></li>
+  <li><a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">Expressions régulières</a></li>
 </ul>