logo oujood
🔍

jQuery : la méthode text()

text() lit ou remplace le contenu texte des éléments sélectionnés, sans interpréter le HTML. Ce tutoriel explique ses trois formes d'utilisation avec des exemples commentés.

OUJOOD.COM

À quoi sert la méthode text() en jQuery ?

La méthode text() sert à deux choses : lire le contenu texte d'un élément, ou le remplacer. Ce qui la distingue de html(), c'est qu'elle ignore les balises — elle ne travaille qu'avec le texte brut. Si l'élément contient du HTML, text() le traite comme du texte ordinaire, sans l'interpréter.

Elle fonctionne sur tous les sélecteurs jQuery et accepte trois formes : sans argument pour lire, avec une chaîne pour écrire, et avec une fonction pour modifier dynamiquement chaque élément.

Lire le contenu texte d'un élément

Sans argument, text() retourne le contenu texte combiné de tous les éléments sélectionnés. Les balises HTML éventuellement présentes sont ignorées — seul le texte visible est retourné.

Syntaxe

$(sélecteur).text()

Exemple — Afficher le texte de tous les paragraphes

Au clic sur le bouton, jQuery récupère le texte de tous les éléments <p> et l'affiche dans une alerte. Si plusieurs paragraphes correspondent au sélecteur, leurs textes sont concaténés.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      alert($("p").text()); // affiche le texte combiné de tous les <p>
    });
  });
  </script>
</head>
<body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Afficher le contenu texte</button>
</body>
</html>

Remplacer le contenu texte d'un élément

Avec un argument, text() remplace le contenu de tous les éléments sélectionnés par la valeur fournie. Tout le contenu existant — texte et balises — est effacé et remplacé par la chaîne passée en paramètre.

Syntaxe

$(sélecteur).text(contenu)

Paramètre Description
contenu Le nouveau texte à insérer dans les éléments sélectionnés. Note : les caractères spéciaux comme < et > sont automatiquement encodés en entités HTML.

Exemple — Remplacer le texte de tous les paragraphes

Au clic, tous les éléments <p> reçoivent le même texte. L'ancien contenu est perdu.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text("Bonjour le monde !"); // remplace le contenu de tous les <p>
    });
  });
  </script>
</head>
<body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Remplacer le texte</button>
</body>
</html>

Modifier le texte avec une fonction

La troisième forme passe une fonction à text(). jQuery appelle cette fonction pour chaque élément sélectionné, en lui transmettant l'index de l'élément et son contenu actuel. Utile quand la nouvelle valeur dépend de l'élément lui-même.

Syntaxe

$(sélecteur).text(function(index, ancienContenu))

Paramètre Description
function(index, ancienContenu) Fonction appelée pour chaque élément sélectionné. Elle doit retourner le nouveau contenu texte.
  • index — position de l'élément dans la sélection (commence à 0)
  • ancienContenu — contenu texte actuel de l'élément

Exemple — Numéroter les paragraphes automatiquement

La fonction reçoit l'index de chaque <p> et l'intègre dans le nouveau texte. Chaque paragraphe obtient ainsi un contenu différent, calculé à la volée.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text(function(n){
        return "Paragraphe numéro : " + n; // n = index de chaque élément <p>
      });
    });
  });
  </script>
</head>
<body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Numéroter les paragraphes</button>
</body>
</html>

text() vs html() — quelle différence concrète ?

Les deux méthodes lisent et écrivent du contenu, mais leur comportement face au HTML est opposé. Voici l'illustration la plus directe : passer une chaîne contenant une balise <b>.

Exemple — text() encode le HTML, html() l'interprète

Avec text(), la balise <b> s'affiche telle quelle dans la page — elle n'est pas interprétée. Avec html(), le texte apparaît en gras. Ce comportement de text() est intentionnel : il protège contre les injections HTML.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p:first").text("<b>Texte en gras ?</b>");  // affiche la balise telle quelle
      $("p:last").html("<b>Texte en gras !</b>");   // interprète la balise — texte en gras
    });
  });
  </script>
  <style>p { color: blue; margin: 8px; }</style>
</head>
<body>
  <button>Comparer text() et html()</button>
  <p>Premier paragraphe — modifié par text()</p>
  <p>Deuxième paragraphe — modifié par html()</p>
</body>
</html>

Exemple — Lire le texte d'un paragraphe et l'écrire dans un autre

On lit le contenu texte du premier paragraphe avec text(), puis on l'injecte dans le dernier avec html(). Comme text() supprime les balises à la lecture, le résultat ne contient que du texte brut — même si le premier paragraphe contenait du HTML.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      var contenu = $("p:first").text();  // lecture : balises ignorées
      $("p:last").html(contenu);          // écriture dans le dernier paragraphe
    });
  });
  </script>
  <style>p { color: blue; margin: 8px; } b { color: red; }</style>
</head>
<body>
  <button>Copier le texte</button>
  <p><b>Paragraphe</b> source.</p>
  <p></p>
</body>
</html>
← Méthodes manipulation HTML    Sommaire   

Par gerywa | Mis à jour le 7 mai 2026