innerText ?

Je vous propose aujourd’hui un bon vieux post technique pour briser cette longue période de silence…

Il y a peu, j’ai eu besoin de récupérer le contenu textuel d’un tag HTML. Concrètement, je voulais lire le texte se trouvant dans un fil d’Ariane, sans récupérer le contenu HTML de ce tag. Pour faire simple, à partir de ceci :

<ol id="breadcrumbs">
	<li><a href="index.php">Accueil</a> &raquo;</li>
	<li><a href="news.php">News</a> &raquo;</li>
	<li>Le point sur la crise financière...</li>
</ol>

Je voulais obtenir quelque chose comme :

Accueil » News » Le point sur la crise financière...

En passant, et comme je vous vois déjà venir, je suis au courant que mon markup n’est pas sémantique… Je devrais virer les » et les remplacer par un background sur le a (ou mieux : utiliser la pseudo-classe CSS :after mais c’est encore loin d’être supporté sur tous nos navigateurs…)

Bref, ce dont j’avais besoin n’était pas quelque chose comme innerHTML (qui m’aurait donné tout le contenu HTML du ol, ce qui inclut les tags li et a) mais plutôt quelque chose comme innerText.

Est-ce que innerText existe ?

Oui et non… A vrai dire, cela fonctionne partout sauf sur les navigateurs dont le moteur de rendu est Gecko, c’est-à-dire Mozilla Firefox, principalement… Gecko fait le même boulot via la propriété textContent et il a raison car c’est le standard W3C.

Pour pouvoir récupérer le contenu textuel d’un tag, de façon cross-browsers, il faut donc tester si textContent existe, l’utiliser si ce test s’avère positif et utiliser innerText dans tous les autres cas.

Comment tester que innerText (ou textContent) existe ?

Simplement en testant sur un élément qui est toujours présent dans un document, l’élément body, par exemple :

var hasInnerText = !!document.getElementsByTagName('body')[0].innerText;

Maintenant, vous pouvez tester et vérifier la valeur de hasInnerText avant d’utiliser innerText ou textContent.

Mais cela me semble un peu laborieux… Pourquoi ne pas créer une fonction qui renverra toujours le bon résultat, quel que soit le navigateur utilisé ? Le top du top est d’ajouter une méthode directement sur Element via le prototypage :

Element.prototype.text = function() {
	return !!document.getElementsByTagName('body')[0].innerText ? this.innerText : this.textContent;
}

Vous pouvez désormais utiliser cette expression, elle donne le résultat espéré :

document.getElementById('breadcrumbs').text();

Cela résout ce problème dont je suis sans doute un des seuls sur terre à m’être posé (quoique). Pendant que vous êtes en train de paniquer à propos de la crise, de votre argent en banque, de vos investissements et du pouvoir d’achat, j’essaye de m’occuper comme je peux…