Ich habe JavaScript-Code, der im IE funktioniert und Folgendes enthält:
myElement.innerText = "foo";
Es scheint jedoch, dass die Eigenschaft 'innerText' in Firefox nicht funktioniert. Gibt es ein Firefox-Äquivalent? Oder gibt es eine allgemeinere, browserübergreifende Eigenschaft, die verwendet werden kann?
Antworten:
Firefox verwendet die W3C-kompatible textContent- Eigenschaft.
Ich denke, Safari und Opera unterstützen diese Eigenschaft ebenfalls.
quelle
innerText
wird / wird ab 2016 in FF unterstützt.innerText
nur verwendet werden, und erwarten, dass diese in naher Zukunft auf allen aktuellen Browsern und auch auf dem alten IE (mit möglichen Macken) funktionieren.innerText
sich grundlegend vontextContent
und ist tatsächlich sehr nützlich (überraschenderweise von einer vermuteten IE-Eigenart ...):innerText
versucht, eine ungefähre Darstellung der tatsächlichen Darstellung des Textes im Browser zu geben, ganz anders als dastextContent
, das nur etwa das Tag- zurückgibt. Entfernen der Markup-Quelle , Hinzufügen von geringem Wert oder sogar zusätzliche Probleme (wie der Verlust von Wortgrenzen).Update : Ich habe einen Blog-Beitrag geschrieben, in dem alle Unterschiede viel besser beschrieben werden.
Firefox verwendet den W3C-Standard
Node::textContent
, aber sein Verhalten unterscheidet sich "geringfügig" von dem von MSHTMLinnerText
(das vor einiger Zeit auch von Opera unter Dutzenden anderer MSHTML-Funktionen kopiert wurde).Erstens unterscheidet sich die
textContent
Whitespace-Darstellung voninnerText
einer. Zweitens, und was noch wichtiger ist,textContent
umfasst es den gesamten Inhalt des SCRIPT-Tags , während innerText dies nicht tut.Um die Dinge unterhaltsamer zu gestalten, hat Opera - neben der Implementierung des Standards
textContent
- beschlossen, auch MSHTMLs hinzuzufügen, dieseinnerText
jedoch dahingehend geändert, dass sie alstextContent
SCRIPT-Inhalte dienen (tatsächlichtextContent
undinnerText
in Opera scheinen sie identische Ergebnisse zu liefern, wahrscheinlich nur untereinander). .textContent
ist Teil derNode
Schnittstelle, währendinnerText
Teil vonHTMLElement
. Dies bedeutet zum Beispiel, dass Sie "abrufen" können,textContent
aber nichtinnerText
von Textknoten:Schließlich hat Safari 2.x auch eine fehlerhafte
innerText
Implementierung.innerText
Funktioniert in Safari nur dann ordnungsgemäß, wenn ein Elementstyle.display == "none"
im Dokument weder ausgeblendet (via ) noch verwaist ist. AndernfallsinnerText
entsteht eine leere Zeichenfolge.Ich habe mit
textContent
Abstraktion gespielt (um diese Mängel zu umgehen), aber es stellte sich als ziemlich komplex heraus .Am besten definieren Sie zuerst Ihre genauen Anforderungen und folgen von dort aus. Es ist oft möglich, Tags einfach
innerHTML
von einem Element zu entfernen, anstatt alle möglichentextContent
/innerText
Abweichungen zu behandeln.Eine andere Möglichkeit besteht natürlich darin, den DOM-Baum zu durchlaufen und Textknoten rekursiv zu sammeln.
quelle
innerText
in Chrome 60x langsamer ist . jsperf.com/text-content/3textContent
wird jetzt in IE9 + unterstützt, aber Firefox wird immer noch nicht unterstütztinnerText
(obwohl sie vorouterHTML
wenigen Tagen den eingeführten IE hinzugefügt haben).Node.textContent
Shim: github.com/usmonster/aight/blob/node-textcontent-shim/js/… (hoffentlich bald in aight enthalten ).innerText
wird / wird ab 2016 in FF unterstützt.Wenn Sie nur Textinhalte festlegen und nicht abrufen müssen, finden Sie hier eine einfache DOM-Version, die Sie in jedem Browser verwenden können. Es ist weder die IE innerText-Erweiterung noch die DOM Level 3 Core textContent-Eigenschaft erforderlich.
quelle
!==
Operator, der umgekehrt ist===
. Der typsensitive Vergleich, der von===
/ verwendet wird,!==
ist normalerweise den losen Komparatoren==
/ vorzuziehen!=
.!==null
übrigens komplett verwerfen ), anstatt nur die Schleife durch zu ersetzenelement.innerHTML=''
(die genau die gleiche Arbeit wie die Schleife ausführen soll, und dann erinnerte ich mich). .: Tabellen in (Legacy-) IE ... ericvasilik.com/2006/07/code-karma.html Könnte ich vorschlagen, eine kurze Beschreibung der "versteckten" und fast nie dokumentierten "Nebenwirkung" descreateTextNode
Ersetzens von Amp lt hinzuzufügen und gt zu ihren jeweiligen HTML-Zeichenentitäten? Ein Link zu seinem genauen Verhalten wäre großartig!jQuery bietet eine
.text()
Methode, die in jedem Browser verwendet werden kann. Zum Beispiel:quelle
Gemäß der Antwort von Prakash K unterstützt Firefox die innerText-Eigenschaft nicht. Sie können also einfach testen, ob der Benutzeragent diese Eigenschaft unterstützt, und wie folgt vorgehen:
quelle
Eine wirklich einfache Zeile Javascript kann den "nicht taggy" Text in allen Hauptbrowsern erhalten ...
quelle
textContent
und Weise gibt undinnerText
Leerzeichen melden , die für einige Anwendungsfälle von Bedeutung sein können.||
, dh:var myText = (myElement.innerText || myElement.textContent || "") ;
um einen undefinierten Wert zu überwinden.Beachten Sie, dass die
Element::innerText
Eigenschaft nicht den Text enthält, der durch den CSS-Stil "display:none
" in Google Chrome ausgeblendet wurde (und den Inhalt löscht, der durch andere CSS-Techniken maskiert wurde (einschließlich Schriftgröße: 0, Farbe: transparent und)) einige andere ähnliche Effekte, die dazu führen, dass der Text nicht sichtbar gerendert wird).Andere CSS-Eigenschaften werden ebenfalls berücksichtigt:
<br \>
generiert das Inline-Element , das eine Inline-Newline generiert, auch eine Newline im Wert von innerText.Enthält
Element::textContent
jedoch ALLE Inhalte innerer Textelemente unabhängig vom angewendeten CSS, auch wenn sie unsichtbar sind. In textContent werden keine zusätzlichen Zeilenumbrüche oder Leerzeichen generiert, bei denen lediglich alle Stile und die Struktur sowie Inline- / Block- oder positionierte Typen innerer Elemente ignoriert werden.Beim Kopieren / Einfügen mit der Mausauswahl wird der verborgene Text im
textContent
Nur -Text-Format, das in die ZwischenablageinnerText
eingefügt wird, verworfen , sodass nicht alles in der Datei enthalten ist , sondern nur das, was sich darin befindet (nach der Generierung von Leerzeichen / Zeilenumbrüchen wie oben). .Beide Eigenschaften werden dann in Google Chrome unterstützt, ihr Inhalt kann dann jedoch unterschiedlich sein. Ältere Browser, die immer noch in innetText enthalten sind, ähneln dem, was textContent jetzt enthält (aber ihr Verhalten in Bezug auf die damalige Erzeugung von Leerzeichen / Zeilenumbrüchen war inkonsistent).
jQuery löst diese Inkonsistenzen zwischen Browsern mithilfe der Methode ".text ()", die zu den analysierten Elementen hinzugefügt wird, die über eine $ () - Abfrage zurückgegeben werden. Intern löst es die Schwierigkeiten, indem es in das HTML-DOM schaut und nur mit der "Knoten" -Ebene arbeitet. Es wird also etwas zurückgegeben, das eher dem Standardtextinhalt ähnelt.
Die Einschränkung besteht darin, dass diese jQuery-Methode keine zusätzlichen Leerzeichen oder Zeilenumbrüche einfügt, die möglicherweise auf dem Bildschirm durch Unterelemente (wie
<br />
) des Inhalts sichtbar sind .Wenn Sie einige Skripte für die Barrierefreiheit entwerfen und Ihr Stylesheet für nicht-akustisches Rendern analysiert wird, z. B. Plugins für die Kommunikation mit einem Braille-Reader, sollte dieses Tool den Textinhalt verwenden, wenn es die spezifischen Interpunktionszeichen enthalten muss, die in mit gestalteten Bereichen hinzugefügten Bereichen hinzugefügt werden "display: none", die normalerweise in Seiten enthalten sind (z. B. für hochgestellte / tiefgestellte Zeichen), andernfalls ist der innerText für den Braille-Reader sehr verwirrend.
Von CSS-Tricks ausgeblendete Texte werden jetzt normalerweise von großen Suchmaschinen ignoriert (die auch das CSS Ihrer HTML-Seiten analysieren und Texte ignorieren, die keine kontrastierenden Farben im Hintergrund haben), indem sie einen HTML / CSS-Parser und die DOM-Eigenschaft verwenden "innerText" genau wie in modernen visuellen Browsern (zumindest dieser unsichtbare Inhalt wird nicht indiziert, sodass versteckter Text nicht als Trick verwendet werden kann, um die Aufnahme einiger Schlüsselwörter in die Seite zu erzwingen, um den Inhalt zu überprüfen); Dieser versteckte Text wird jedoch weiterhin auf der Ergebnisseite angezeigt (wenn die Seite noch für den Index qualifiziert war, um in die Ergebnisse aufgenommen zu werden). Verwenden Sie dazu die Eigenschaft "textContent" anstelle des vollständigen HTML-Codes, um die zusätzlichen Stile und Skripte zu entfernen.
Wenn Sie in einer dieser beiden Eigenschaften Klartext zuweisen, werden das innere Markup und die darauf angewendeten Stile überschrieben (nur das zugewiesene Element behält seinen Typ, seine Attribute und Stile bei), sodass beide Eigenschaften denselben Inhalt enthalten . Einige Browser berücksichtigen das Schreiben in innerText jetzt jedoch nicht mehr und lassen Sie nur die textContent-Eigenschaft überschreiben (Sie können beim Schreiben in diese Eigenschaften kein HTML-Markup einfügen, da HTML-Sonderzeichen ordnungsgemäß mit numerischen Zeichenreferenzen codiert werden, um buchstäblich angezeigt zu werden , wenn Sie dann die
innerHTML
Eigenschaft nach der Zuweisung voninnerText
oder lesentextContent
.quelle
innerText
. In meinen Tests werden nur "Anzeige: keine" und "Sichtbarkeit: versteckt" ignoriert.Bearbeiten (danke an Mark Amery für den Kommentar unten): Tun Sie dies nur so, wenn Sie zweifelsfrei wissen, dass kein Code darauf angewiesen ist, die Existenz dieser Eigenschaften zu überprüfen, wie dies beispielsweise bei jQuery der Fall ist. Wenn Sie jedoch jQuery verwenden, verwenden Sie wahrscheinlich nur die Funktion "text" und führen $ ('# myElement'). Text ('foo') aus, wie einige andere Antworten zeigen.
quelle
innerText
oder überprüft, umtextContent
zu entscheiden, welche verwendet werden sollen. Wenn Sie beide auf eine Zeichenfolge setzen, wird der Code anderer Personen, der auf das Element einwirkt, fälschlicherweise erkennen, dass der Browser beide Eigenschaften unterstützt. Folglich kann sich dieser Code schlecht verhalten.innerText
wurde zu Firefox hinzugefügt und sollte in der FF45-Version verfügbar sein: https://bugzilla.mozilla.org/show_bug.cgi?id=264412Ein Entwurf einer Spezifikation wurde geschrieben und wird voraussichtlich in Zukunft in den HTML-Lebensstandard aufgenommen: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465
Beachten Sie, dass derzeit die Firefox-, Chrome- und IE-Implementierungen nicht kompatibel sind. In Zukunft können wir wahrscheinlich erwarten, dass Firefox, Chrome und Edge konvergieren, während der alte IE nicht kompatibel ist.
Siehe auch: https://github.com/whatwg/compat/issues/5
quelle
innerText
. Wenn diestextContent
ein akzeptabler Fallback ist und Sie alte FX unterstützen müssen, verwenden Sie(innerText || textContent)
. Wenn Sie eine identische Implementierung in allen Browsern wünschen, gibt es meines Erachtens keine spezifische Polyfüllung dafür, aber einige Frameworks (z. B. jQuery) implementieren möglicherweise bereits etwas Ähnliches - siehe die anderen Antworten auf dieser Seite.innerText
: das heißt: der sichtbare Text auf einer Seite in Firefox> = 38 (für ein Addon) Zumindest sollten die<script>
Tags vollständig weggelassen werden. jQuery's$('#body').text()
hat bei mir nicht funktioniert. Aber als WorkaroundinnerText || textContent
ist das in Ordnung. Danke dir.textContent
.Was ist mit so etwas?
** Ich musste meine Großbuchstaben machen.
quelle
Wie im Jahr 2016 von Firefox v45,
innerText
arbeitet an Firefox, werfen Sie einen Blick auf die Unterstützung: http://caniuse.com/#search=innerTextWenn Sie möchten, dass es mit früheren Versionen von Firefox funktioniert, können Sie Folgendes verwenden
textContent
, das Firefox besser unterstützt, ältere IE-Versionen jedoch schlechter : http://caniuse.com/#search=textContentquelle
Das war meine Erfahrung mit
innerText
,textContent
,innerHTML
, und Wert:dh = Internet Explorer, ff = Firefox, ch = Google Chrome. Anmerkung 1: ff funktioniert so lange, bis der Wert mit der Rücktaste gelöscht wurde - siehe Anmerkung von Ray Vega oben. Hinweis 2: Funktioniert etwas in Chrom - nach dem Update bleibt es unverändert, dann klicken Sie weg und klicken zurück in das Feld und der Wert wird angezeigt. Das Beste von allem ist
elem.value = changeVal
; was ich oben nicht kommentiert habe.quelle
Nur Reposting von Kommentaren unter dem ursprünglichen Beitrag. innerHTML funktioniert in allen Browsern. Danke stefita.
myElement.innerHTML = "foo";
quelle
innerHTML
ist kein angemessener Ersatz fürtextContent
/ esinnerText
sei denn, Sie können sicher sein, dass der von Ihnen zugewiesene Text keine Tags oder andere HTML-Syntax enthält. Für alle vom Benutzer bereitgestellten Daten haben Sie definitiv keine Garantie. Es ist gefährlich, diesen Ansatz ohne diese Einschränkung voranzutreiben, da dies zu XSS- Sicherheitslücken führen kann . Bei so vielen sicheren Ansätzen gibt es keinen Grund, diesen überhaupt in Betracht zu ziehen..innerHTML
, ist Ihr Code fehlerhaft und Sie sind möglicherweise anfällig für XSS. Was passiert, wenn diese Zeichenfolge ist"<script>alert(1)</script>"
?<script>
über eingefügtes TaginnerHTML
nicht ausgeführt werden soll. Dies schützt ältere Browser jedoch nicht. AußerdeminnerHTML
würde HTML5 zum Beispiel NICHT schützen"<img src='x' onerror='alert(1)'>"
.fand dies hier:
quelle
textContent
wird ? Es ist auch erwähnenswert, dass dainnerText
undtextContent
unterschiedliche Verhaltensweisen haben, über den Code nicht treu isttextContent
Shim - das potentiell wichtig ist, aber nicht unbedingt offensichtlich!Es ist auch möglich,
innerText
Verhalten in anderen Browsern zu emulieren :quelle
pre
s kaputt, da er die Zeilenumbrüche verdoppelt. Ich vermute, hier stimmt mehr nicht.