"innerText" fonctionne dans IE, mais pas dans Firefox

Update : j'ai écrit un blog post détaillant toutes les différences beaucoup mieux.

Firefox utilise la norme W3C Node::textContent , mais son comportement diffère" légèrement "de celui du propriétaire de MSHTML innerText (copié par Opera aussi, il y a quelque temps, parmi des dizaines d'autres fonctionnalités MSHTML).

tout D'abord, textContent la représentation de l'espace est différent de innerText . Deuxièmement, et plus important encore, textContent inclut tout le contenu de L'étiquette de SCRIPT , alors qu'innerText ne le fait pas.

juste pour rendre les choses plus divertissantes, Opera - outre la mise en œuvre de la norme textContent - a décidé d'ajouter aussi MSHTML innerText mais l'a modifié pour agir comme textContent - c. - à-d. y compris le contenu du SCRIPT (en fait, textContent et innerText dans Opera semblent produisent des résultats identiques, étant probablement juste un alias de l'autre).

textContent fait partie de Node interface, tandis que innerText fait partie de HTMLElement . Cela, par exemple, signifie que vous pouvez "récupérer " textContent mais pas innerText à partir des noeuds de texte:

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

Enfin, Safari 2.x a également buggé innerText mise en œuvre. Dans Safari, innerText ne fonctionne correctement que si un élément est ni cachée (via style.display == "none" ) ni orphelin du document. Sinon, innerText donne une chaîne vide.

je jouais avec textContent abstraction (pour travailler autour de ces déficiences), mais il s'est avéré être plutôt complexe .

le mieux est de d'abord définir vos besoins exacts et de suivre de là. Il est souvent possible de retirer simplement des étiquettes d'un élément innerHTML , plutôt que de traiter tous les écarts possibles textContent / innerText .

une autre possibilité, bien sûr, est de marcher dans le DOM tree et de collecter les noeuds de texte de façon récursive.

si vous n'avez besoin que de définir le contenu du texte et de ne pas le récupérer, voici une version DOM triviale que vous pouvez utiliser sur n'importe quel navigateur; elle ne nécessite ni L'extension IE innerText ni la propriété DOM Level 3 Core textContent.

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

jQuery fournit une méthode .text() qui peut être utilisée dans n'importe quel navigateur. Par exemple:

$('#myElement').text("Foo");

selon la réponse de Prakash K, Firefox ne supporte pas la propriété innerText. Ainsi, vous pouvez simplement tester si l'agent utilisateur supporte cette propriété et procéder en conséquence comme ci-dessous:

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}

une ligne très simple de Javascript peut obtenir le texte" non-taggy " dans tous les navigateurs principaux...

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);

notez que la propriété Element::innerText ne contiendra pas le texte qui a été caché par le style CSS" display:none " dans Google Chrome (ainsi que le contenu qui a été masqué par d'autres techniques CSS (y compris la taille de police:0, Couleur:transparent, et quelques autres effets similaires qui font que le texte ne soit pas rendu de manière visible).

D'autres propriétés CSS sont également considérées:

• tout d'abord, le style" display: "des éléments intérieurs est analysé pour déterminer s'il délimite un contenu de bloc (comme" display:block " qui est la valeur par défaut des éléments de bloc HTML dans la feuille de style intégrée du navigateur, et dont le comportement n'a pas été dépassé par votre propre style CSS); si c'est le cas, une nouvelle ligne sera insérée dans la valeur de la propriété innerText. Cela n'arrivera pas avec la propriété textContent.
• les propriétés CSS qui génèrent des contenus en ligne seront également considéré : par exemple, l'élément inline <br \> qui génère une nouvelle ligne inline générera également une nouvelle ligne dans la valeur d'innerText.
• le style "display:inline" ne provoque pas de newline ni dans le textContent ni dans le texte.
• le style" display:table"génère de nouvelles lignes autour de la table et entre les lignes de la table, mais" display:table-cell " générera un caractère de tabulation.
• la "position:absolue" propriété (utilisé avec display: block ou display: inline, cela n'a pas d'importance) provoquera également une rupture de ligne à insérer.
• certains navigateurs incluront également une seule séparation d'espace entre les travées

mais Element::textContent contiendra tout contenu des éléments de texte intérieurs indépendamment de la CSS appliquée, même s'ils sont invisibles. Et aucun newlines ou espaces supplémentaires ne seront générés dans textContent, qui ignore juste tous les styles et les structure et types d'éléments intérieurs inline/block ou positionnés.

une opération de copier/coller à l'aide de la sélection à la souris éliminera le texte caché dans le format de texte simple qui est mis dans le bloc-notes, de sorte qu'il ne contiendra pas tout dans le textContent , mais seulement ce qui est dans innerText (après whitespace/newline génération comme ci-dessus).

les deux propriétés sont alors prises en charge dans Google Chrome, mais leur contenu peut alors être différent. Aîné les navigateurs toujours inclus dans innetText tout comme ce que textContent contient maintenant (mais leur comportement en relation avec la génération d'espaces blancs/newlines était incohérent).

jQuery résoudra ces incohérences entre les navigateurs en utilisant le ".la méthode text () " ajoutée aux éléments analysés retourne via une requête $ (). En interne, il résout les difficultés en regardant dans le DOM HTML, en ne travaillant qu'au niveau du "noeud". Donc il va rendre quelque chose qui regarde plus comme le textContent standard.

la mise en garde est que cette méthode jQuery n'insérera pas d'espaces ou de sauts de ligne supplémentaires qui pourraient être visibles à l'écran causés par des sous-éléments (comme <br /> ) du contenu.

si vous concevez certains scripts pour l'accessibilité et que votre feuille de style est analysée pour un rendu non sonore, tel que des plugins utilisés pour communiquer avec un lecteur Braille, cet outil devrait utiliser le contenu text s'il doit inclure les signes de ponctuation spécifiques qui sont ajoutés dans les portées stylisées avec "display:none" et qui sont généralement inclus dans les pages (par exemple pour les superscripts/subscripts), sinon le texte interne sera très confusionnel sur le lecteur Braille.

les textes cachés par les astuces CSS sont maintenant généralement ignorés par les principaux moteurs de recherche (qui analyseront également les CSS de vos pages HTML, et ignoreront également les textes qui ne sont pas en couleurs contrastées sur le fond) en utilisant un HTML / CSS parser et la propriété DOM "innerText" exactement comme dans les navigateurs visuels modernes (au moins ce contenu invisible ne sera pas indexé de sorte que le texte caché ne peut pas être utilisé comme une astuce pour forcer l'inclusion de certains mots-clés dans la page pour vérifier son contenu) ; mais ce texte caché sera encore affiché dans la page de résultat (si la page était encore qualifiée de l'index pour être inclus dans les résultats), en utilisant la propriété "textContent" au lieu du HTML complet pour rayer les styles et scripts supplémentaires.

si vous assignez un texte en clair dans l'une de ces deux propriétés, cela écrasera le balisage interne et les styles appliqués (seul l'élément assigné conservera son type, Ses Attributs et ses styles), de sorte que les deux propriétés contiendront alors le même contenu. Cependant, certains navigateurs n'honoreront plus la propriété write to innerText, et ne vous laisseront qu'écraser la propriété textContent (vous ne pouvez pas insérer de markup HTML lorsque vous écrivez sur ces propriétés, en tant que HTML special les caractères seront codés correctement en utilisant des références de caractères numériques pour apparaître littéralement, si vous lisez alors la propriété innerHTML après la cession de innerText ou textContent .

myElement.innerText = myElement.textContent = "foo";

Edit (merci à Mark Amery pour le commentaire ci-dessous): seulement le faire de cette façon si vous savez au-delà d'un doute raisonnable qu'aucun code ne sera basé sur la vérification de l'existence de ces propriétés, comme (par exemple) jQuery does. Mais si vous utilisez jQuery, vous utiliserez probablement la fonction "text" et ferez $('#myElement').texte('foo') comme certains autres réponses montrent.

innerText a été ajouté à Firefox et devrait être disponible dans la version FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Un projet de spec a été rédigé et devrait être intégrée dans le code HTML du niveau de vie dans l'avenir: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/465

noter que actuellement, les implémentations de Firefox, Chrome et IE sont toutes incompatibles. À l'avenir, on peut s'attendre à ce que Firefox, Chrome et Edge convergent alors que la vieille IE reste incompatible.

Voir aussi: https://github.com/whatwg/compat/issues/5

Qu'en est-il de quelque chose comme ça?

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

** j'avais besoin de faire mine de majuscules.

comme en 2016 de Firefox v45, innerText travaux sur firefox, jetez un oeil à son support: http://caniuse.com/#search=innerText

si vous voulez qu'il fonctionne sur les versions précédentes de Firefox, vous pouvez utiliser textContent , qui a meilleur soutien sur Firefox mais pire sur les versions plus anciennes D'IE : http://caniuse.com/#search=textContent

cela a été mon expérience avec innerText , textContent , innerHTML , et valeur:

// elem.innerText = changeVal;  // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal;  // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal);  // does not work on ie ff or ch
// elem.innerHTML = changeVal;  // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
   elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch

ie = internet explorer, ff = firefox, ch = google chrome. note 1: ff fonctionne jusqu'à ce que la valeur après soit supprimée avec backspace - voir la note de Ray Vega ci-dessus. note 2: fonctionne un peu dans chrome - après la mise à jour, il est inchangé, puis vous cliquez loin et cliquez de nouveau dans le champ et la valeur apparaît. Le meilleur du lot est elem.value = changeVal ; que je n'ai pas commenté surtout.

tout renouvellement de commentaires sous le post original. innerHTML fonctionne dans tous les navigateurs. Merci stefita.

myElement.innerHTML = "foo";

a trouvé ceci ici:

<!--[if lte IE 8]>
    <script type="text/javascript">
        if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
            !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
          (function() {
            var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
            Object.defineProperty(Element.prototype, "textContent",
              { // It won't work if you just drop in innerText.get
                // and innerText.set or the whole descriptor.
                get : function() {
                  return innerText.get.call(this)
                },
                set : function(x) {
                  return innerText.set.call(this, x)
                }
              }
            );
          })();
    </script>
<![endif]-->

il est également possible d'émuler innerText comportement dans les autres navigateurs:

 if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
     HTMLElement.prototype.__defineGetter__("innerText", function () {
         if (this.textContent) {
             return this.textContent;
         } else {
             var r = this.ownerDocument.createRange();
             r.selectNodeContents(this);
             return r.toString();
         }
     });
     HTMLElement.prototype.__defineSetter__("innerText", function (str) {
         if (this.textContent) {
             this.textContent = str;
         } else {
             this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n");
         }
     });
 }