jQuery / Méthode / .text() - Lire ou remplacer le contenu textuel

Dans jQuery, .text() renvoie une chaîne combinant le texte de tous les éléments sélectionnés et de leurs descendants. .text(value) remplace le contenu de chaque élément par ce texte, sans interpréter de balises HTML. Pour des résultats séparés, lisez chaque élément dans un tableau plutôt qu'avec le getter global.

Portée de lecture, html et val

L'API .text() lit toute la sélection, pas seulement le premier élément. Elle exclut le balisage, inclut le texte descendant et n'ajoute pas de séparateurs entre éléments. Elle n'extrait pas uniquement ce qui est visiblement affiché.

.html() traite les balises et .val() les valeurs actuelles des champs. Ne lisez pas la saisie actuelle d'un input avec .text(). Cette dernière fonctionne dans les documents XML comme HTML.

Comparer résultat combiné et résultats individuels

Enregistrez tout le code en UTF-8 dans text-demo.html et ouvrez-le dans un navigateur. Internet permet de charger le fichier officiel jQuery 4.0.0 depuis le réseau de diffusion de contenu, CDN, sans installation de paquet. Lecture, écriture, préfixes par fonction, effacement, Reset et exemple Console ont été exécutés avec 3.7.1 et 4.0.0.

Le premier paragraphe contient Alpha et un span hidden contenant Hidden ; le second contient Beta. JSON.stringify() montre limites des chaînes et valeurs vides. perItem lit chaque élément par .map(), puis .get() produit un tableau ordinaire.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read and replace text contents</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, input { font: inherit; margin: 4px; max-width: 100%; }
    .item { border: 2px solid teal; padding: 16px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Plain text from multiple elements</h1>
  <label>Value <input id="value" value="&lt;em&gt;Hello&lt;/em&gt;"></label>
  <button type="button" id="set">Set text</button>
  <button type="button" id="prefix">Prefix each item</button>
  <button type="button" id="clear">Clear text</button>
  <button type="button" id="read">Read</button>
  <button type="button" id="reset">Reset</button>
  <div id="items"><p class="item"><strong>Alpha</strong><span hidden>Hidden</span></p><p class="item">Beta</p></div>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const $items = $("#items > .item");
      const initial = $items.get().map(node => node.innerHTML);
      function report() {
        const combined = $items.text();
        const perItem = $items.map(function () { return $(this).text(); }).get();
        $("#result").text(`combined=${JSON.stringify(combined)}\nper item=${JSON.stringify(perItem)}\nitems=${$items.length}`);
      }
      $("#set").on("click", function () { $items.text($("#value").val()); report(); });
      $("#prefix").on("click", function () {
        $items.text(function (index, oldText) { return (index + 1) + ". " + oldText; });
        report();
      });
      $("#clear").on("click", function () { $items.text(""); report(); });
      $("#read").on("click", report);
      $("#reset").on("click", function () {
        $items.html(function (index) { return initial[index]; });
        $("#value").val("<em>Hello</em>");
        report();
      });
      report();
    });
  </script>
</body>
</html>

Résultat initial :

combined="AlphaHiddenBeta"
per item=["AlphaHidden","Beta"]
items=2

1. Read donne le même résultat. Hidden est invisible mais figure dans combined et le premier élément du tableau.
2. Prefix each item utilise index et oldText pour créer 1. AlphaHidden et 2. Beta. strong et le span masqué sont remplacés par du texte.
3. Après Reset, Set text affiche littéralement <em>Hello</em> dans les deux paragraphes sans créer em.
4. Modifiez Value et recommencez. La saisie est lue par .val() ; les espaces initiaux et finaux restent dans la chaîne.
5. Clear text applique .text(""). combined est vide, per item contient deux chaînes vides, les deux paragraphes restent.
6. Reset restaure HTML et saisie conservés. Répéter les préfixes les ajoute au texte actuel : réinitialisez d'abord pour comparer les mêmes conditions.

Espaces, contenu masqué et formatage perdu

Aucun espace n'est ajouté entre Alpha et Beta, donc combined vaut AlphaHiddenBeta. Gardez perItem si les frontières comptent, ou faites join avec votre séparateur. Les espaces/sauts de ligne du modèle objet du document, DOM, et les différences de parsing peuvent influencer le résultat.

Le textContent natif traite aussi le texte indépendamment des styles et diffère d'innerText. Pour exclure du texte masqué, décidez d'abord quels éléments inclure. Une lecture large sans règle de visibilité n'est pas exactement le texte vu par le lecteur.

.text(value) n'ajoute pas simplement des caractères à la structure. Elle remplace les balises enfants : sur tout un parent, icônes, liens ou boutons peuvent disparaître. Limitez l'écriture au span du libellé pour conserver les autres enfants.

0, false, sélections vides et valeurs littérales

Exécutez ce fragment complet dans la Console. Il modifie un div temporaire non inséré puis le nettoie. Nombres et booléens deviennent du texte ; & reste sa suite de caractères sans être interprété comme entité HTML.

const $box = $("<div>A <span>B</span> C</div>");
console.log(`spaces=${JSON.stringify($box.text())}`);
$box.text(0);
console.log(`number=${JSON.stringify($box.text())}`);
$box.text(false);
console.log(`boolean=${JSON.stringify($box.text())}`);
$box.text("&amp;");
console.log(`entity characters=${JSON.stringify($box.text())}`);
console.log(`empty selection=${JSON.stringify($().text())}`);
$box.remove();

spaces="A B C"
number="0"
boolean="false"
entity characters="&"
empty selection=""

.text() d'une sélection vide est une chaîne vide. Un élément présent mais vide peut donner la même chose : vérifiez .length pour l'existence. Ne traitez pas systématiquement 0 ou false comme absence de valeur via value || "".

Une chaîne passée à .text() ne s'exécute pas comme balises dans ce parcours textuel. Passer le résultat à .html() ensuite est une nouvelle interprétation HTML. Ne considérez pas .text() comme un assainisseur HTML ; gardez les valeurs textuelles comme texte. Vérifiez portée, descendants, séparateurs, .val() pour les formulaires et erreurs Console en cas de résultat inattendu.