Mam kod JavaScript, który działa w IE, zawierający następujące elementy:
myElement.innerText = "foo";
Wydaje się jednak, że właściwość „innerText” nie działa w przeglądarce Firefox. Czy jest jakiś odpowiednik Firefoksa? A może istnieje bardziej ogólna właściwość dla wielu przeglądarek, z której można skorzystać?
Odpowiedzi:
Firefox używa tekstu zgodnego z W3C właściwości .
Sądzę, że Safari i Opera również obsługują tę właściwość.
źródło
innerText
jest / będzie obsługiwany w FF od 2016 r.innerText
tylko i oczekiwać, że będzie działać (z możliwymi dziwactwami) we wszystkich obecnych przeglądarkach w najbliższej przyszłości, a także w starej wersji IE.innerText
jest głęboko różny odtextContent
i faktycznie jest bardzo przydatny (zaskakująco z domniemanego dziwactwa IE ...):innerText
próbuje podać przybliżenie sposobu, w jaki tekst jest faktycznie prezentowany w przeglądarce, zupełnie inaczej niżtextContent
, co zwraca tylko znacznik pozbawione źródła znaczników , dodające niewielką wartość, a nawet dodatkowe problemy (takie jak utrata granic słów).Aktualizacja : Napisałem post na blogu, w którym wszystkie różnice zostały znacznie lepiej opisane.
Firefox używa standardu W3C
Node::textContent
, ale jego zachowanie „nieznacznie” różni się od własności MSHTMLinnerText
(skopiowanej także przez Operę, jakiś czas temu, spośród kilkudziesięciu innych funkcji MSHTML).Przede wszystkim
textContent
reprezentacja białych znaków różni się odinnerText
jednego. Po drugie, i co ważniejsze,textContent
zawiera całą zawartość znacznika SCRIPT , podczas gdy tekst wewnętrzny nie.Żeby było bardziej zabawnie, Opera - oprócz implementacji standardu
textContent
- postanowiła również dodać MSHTML,innerText
ale zmieniła go tak, by działał jakotextContent
- tj. Włączając zawartość SCRIPT (w rzeczywistości,textContent
ainnerText
Opera wydaje się dawać identyczne wyniki, prawdopodobnie po prostu alias do siebie) .textContent
jest częściąNode
interfejsu, podczas gdyinnerText
jest częściąHTMLElement
. Oznacza to na przykład, że można „pobierać”,textContent
ale nieinnerText
z węzłów tekstowych:Wreszcie Safari 2.x ma również błędną
innerText
implementację. W przeglądarce SafariinnerText
działa poprawnie tylko wtedy, gdy element nie jest ukryty (przezstyle.display == "none"
) ani osierocony z dokumentu. W przeciwnym razieinnerText
powstanie pusty ciąg.Bawiłem się
textContent
abstrakcją (aby obejść te braki), ale okazało się to dość skomplikowane .Najlepiej jest najpierw zdefiniować dokładne wymagania i zacząć od tego momentu. Często można po prostu usunąć tagi
innerHTML
z elementu, zamiast zajmować się wszystkimi możliwymitextContent
/innerText
odchyleniami.Inną możliwością jest oczywiście przejście po drzewie DOM i rekurencyjne zbieranie węzłów tekstowych.
źródło
innerText
w Chrome. jsperf.com/text-content/3textContent
jest teraz obsługiwany w IE9 +, ale Firefox nadal nie obsługujeinnerText
(chociaż dodali IE wprowadzonyouterHTML
zaledwie kilka dni temu).Node.textContent
: github.com/usmonster/aight/blob/node-textcontent-shim/js/… (mam nadzieję, że wkrótce zostanie włączony do aight ).innerText
jest / będzie obsługiwany w FF od 2016 r.Jeśli potrzebujesz tylko ustawić treść tekstową, a nie pobierać, oto trywialna wersja DOM, której możesz używać w dowolnej przeglądarce; nie wymaga ani rozszerzenia IE innerText, ani właściwości textContent DOM Level 3 Core.
źródło
!==
operator, odwrotnie===
. Porównanie czułe na rodzaj używane przez===
/!==
jest zwykle lepsze niż luźne komparatory==
/!=
.!==null
na marginesie całkowicie ją odrzuciłbym) zamiast po prostu zastępując ją pętląelement.innerHTML=''
(która ma wykonać dokładnie taką samą pracę jak pętla, a potem przypomniałam sobie ... .: tabele w (starszej wersji) IE ... ericvasilik.com/2006/07/code-karma.html Może sugeruję dodanie krótkiego opisu „ukrytego” i prawie nigdy nieudokumentowanego „efektu ubocznego”createTextNode
zastąpienia wzmacniacza lt i gt do odpowiednich jednostek znaków HTML? Link do jego dokładnego zachowania byłby wspaniały!jQuery zapewnia
.text()
metodę, której można użyć w dowolnej przeglądarce. Na przykład:źródło
Zgodnie z odpowiedzią Prakash K Firefox nie obsługuje właściwości innerText. Możesz więc po prostu przetestować, czy agent użytkownika obsługuje tę właściwość i postępować zgodnie z poniższym opisem:
źródło
Naprawdę prosta linia Javascript może uzyskać tekst „nie tagowany” we wszystkich głównych przeglądarkach ...
źródło
textContent
iinnerText
raportowaniu białych znaków, które mogą mieć znaczenie w niektórych przypadkach użycia.||
, tj .:var myText = (myElement.innerText || myElement.textContent || "") ;
aby pokonać nieokreśloną wartość.Pamiętaj, że
Element::innerText
właściwość nie będzie zawierała tekstu ukrytego za pomocą stylu CSS „display:none
” w Google Chrome (a także usunie treść zamaskowaną przez inne techniki CSS (w tym rozmiar czcionki: 0, kolor: przezroczysty i kilka innych podobnych efektów, które powodują, że tekst nie jest renderowany w żaden widoczny sposób).Inne właściwości CSS są również brane pod uwagę:
<br \>
który generuje wbudowaną nową linię, również wygeneruje nową linię w wartości tekstu wewnętrznego.Ale
Element::textContent
nadal będzie zawierać WSZYSTKIE treści wewnętrznych elementów tekstowych niezależnie od zastosowanego CSS, nawet jeśli są niewidoczne. W textContent nie będą generowane żadne dodatkowe znaki nowej linii ani białe znaki, co po prostu ignoruje wszystkie style i strukturę oraz typy wewnętrzne / blokowe lub pozycjonowane elementów wewnętrznych.Operacja kopiowania / wklejania za pomocą zaznaczenia myszą spowoduje usunięcie ukrytego tekstu w formacie zwykłego tekstu, który jest umieszczony w schowku, więc nie będzie zawierał wszystkiego w
textContent
, ale tylko to, co jest winnerText
środku (po wygenerowaniu białych znaków / nowej linii, jak wyżej) .Obie właściwości są następnie obsługiwane w Google Chrome, ale ich treść może być inna. Starsze przeglądarki nadal zawierały innetText - wszystko to, co obecnie zawiera textContent (ale ich zachowanie w stosunku do generowania białych znaków / nowych linii było niespójne).
jQuery rozwiąże te niespójności między przeglądarkami za pomocą metody „.text ()” dodanej do przeanalizowanych elementów, które zwraca poprzez zapytanie $ (). Wewnętrznie rozwiązuje to problemy, zaglądając do HTML DOM, pracując tylko z poziomem „węzła”. Zwróci więc coś bardziej przypominającego standardową zawartość tekstową.
Zastrzeżenie polega na tym, że ta metoda jQuery nie wstawi żadnych dodatkowych spacji ani podziałów linii, które mogą być widoczne na ekranie z powodu podelementów (jak
<br />
) zawartości.Jeśli zaprojektujesz niektóre skrypty dla ułatwienia dostępu, a arkusz stylów zostanie przeanalizowany pod kątem renderowania nie-dźwiękowego, na przykład wtyczek używanych do komunikacji z czytnikiem brajlowskim, to narzędzie powinno używać textContent, jeśli musi zawierać określone znaki interpunkcyjne dodane w rozpiętościach z „display: none” i które zazwyczaj są zawarte na stronach (na przykład dla indeksów górnych / dolnych), w przeciwnym razie tekst wewnętrzny będzie bardzo mylący dla czytnika brajlowskiego.
Teksty ukryte przez sztuczki CSS są teraz zwykle ignorowane przez główne wyszukiwarki (które będą również analizować CSS twoich stron HTML, a także będą ignorować teksty, które nie mają kontrastowych kolorów w tle) za pomocą parsera HTML / CSS i właściwości DOM „innerText” dokładnie tak, jak we współczesnych przeglądarkach wizualnych (przynajmniej ta niewidzialna treść nie będzie indeksowana, więc ukryty tekst nie może być użyty jako sztuczka wymuszająca włączenie niektórych słów kluczowych na stronę w celu sprawdzenia jej zawartości); ale ten ukryty tekst będzie nadal wyświetlany na stronie wyników (jeśli strona nadal kwalifikowała się z indeksu do uwzględnienia w wynikach), używając właściwości „textContent” zamiast pełnego HTML do usunięcia dodatkowych stylów i skryptów.
JEŻELI przypiszesz jakiś tekst w dowolnej z tych dwóch właściwości, spowoduje to zastąpienie wewnętrznego znacznika i stylów zastosowanych do niego (tylko przypisany element zachowa swój typ, atrybuty i style), więc obie właściwości będą wówczas zawierać tę samą treść . Jednak niektóre przeglądarki nie będą już honorować zapisu do innerText i pozwolą tylko nadpisać właściwość textContent (nie można wstawiać znaczników HTML podczas pisania do tych właściwości, ponieważ znaki specjalne HTML będą poprawnie kodowane przy użyciu odniesień znaków numerycznych, aby pojawiały się dosłownie , jeśli następnie przeczytasz
innerHTML
właściwość po przypisaniuinnerText
lubtextContent
.źródło
innerText
. W moich testach ignorowane są tylko „display: none” i „visibility: hidden”.Edycja (dzięki Mark Amery za komentarz poniżej): Zrób to w ten sposób tylko wtedy, gdy wiesz ponad wszelką wątpliwość, że żaden kod nie będzie polegał na sprawdzeniu istnienia tych właściwości, jak (na przykład) jQuery . Ale jeśli używasz jQuery, prawdopodobnie po prostu użyjesz funkcji „tekst” i wykonasz $ ('# myElement'). Text ('foo'), jak pokazują niektóre inne odpowiedzi.
źródło
innerText
lubtextContent
i decyduje, którego z nich użyć. Ustawiając oba na łańcuch, sprawisz, że kod innej osoby działający na elemencie błędnie wykryje, że przeglądarka obsługuje obie właściwości; w związku z tym kod może źle funkcjonować.innerText
został dodany do przeglądarki Firefox i powinien być dostępny w wersji FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412Wersja robocza została napisana i powinna zostać włączona do standardu HTML w przyszłości: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465
Pamiętaj, że obecnie implementacje Firefox, Chrome i IE są niekompatybilne. W przyszłości możemy prawdopodobnie spodziewać się zbieżności Firefoksa, Chrome i Edge, podczas gdy stary IE pozostanie niezgodny.
Zobacz także: https://github.com/whatwg/compat/issues/5
źródło
innerText
. JeślitextContent
jest to akceptowalne rozwiązanie awaryjne i musisz obsługiwać stare Fx, użyj(innerText || textContent)
. Jeśli chcesz mieć identyczną implementację we wszystkich przeglądarkach, nie sądzę, aby istniała jakaś konkretna polifill do tego, ale niektóre frameworki (np. JQuery) mogą już implementować coś podobnego - zapoznaj się z innymi odpowiedziami na tej stronie.innerText
, czyli: widoczny tekst na stronie, w przeglądarce Firefox> = 38 (dla dodatku) Przynajmniej<script>
tagi należy całkowicie pominąć. jQuery$('#body').text()
nie działało dla mnie. Ale jako obejścieinnerText || textContent
jest w porządku. Dziękuję Ci.textContent
.Co powiesz na coś takiego?
** Musiałem zrobić moje wielkie litery.
źródło
Podobnie jak w 2016 r. Z przeglądarki Firefox v45,
innerText
działa na Firefox, spójrz na jego wsparcie: http://caniuse.com/#search=innerTextJeśli chcesz, aby działał na poprzednich wersjach Firefoksa, możesz użyć
textContent
, który ma lepszą obsługę Firefoksa, ale gorzej na starszych wersjach IE : http://caniuse.com/#search=textContentźródło
To było moje doświadczenie z
innerText
,textContent
,innerHTML
i wartości:tj. Internet Explorer, ff = Firefox, ch = Google Chrome. uwaga 1: ff działa aż do momentu usunięcia wartości z backspace - patrz uwaga Ray Vega powyżej. Uwaga 2: działa nieco w Chrome - po aktualizacji nie ulega zmianie, a następnie klikasz i klikasz z powrotem w pole, a wartość jest wyświetlana. Najlepsze jest to
elem.value = changeVal
; których nie skomentowałem powyżej.źródło
Odpowiadam tylko na komentarze z oryginalnego postu. innerHTML działa we wszystkich przeglądarkach. Dzięki, Stefan.
myElement.innerHTML = "foo";
źródło
innerHTML
nie jest odpowiednim zamiennikiemtextContent
/,innerText
chyba że masz pewność, że przypisywany tekst nie zawiera żadnych znaczników ani innej składni HTML. W przypadku jakichkolwiek danych dostarczonych przez użytkownika zdecydowanie nie masz tej gwarancji. Przerzucanie tego podejścia bez tego zastrzeżenia jest niebezpieczne, ponieważ może prowadzić do luk bezpieczeństwa XSS . Przy tak wielu dostępnych bezpiecznych podejściach nie ma powodu, aby nawet rozważać to..innerHTML
, kod jest uszkodzony i jesteś potencjalnie podatny na XSS. Co się stanie, jeśli ten ciąg jest"<script>alert(1)</script>"
?<script>
tag wstawiony przezinnerHTML
nie powinien zostać wykonany. Ale to nie chroni starszych przeglądarek. Ponadto HTML5innerHTML
NIE chroniłby na przykład"<img src='x' onerror='alert(1)'>"
.znalazłem to tutaj:
źródło
textContent
natywnie ? Warto również zauważyć, że skoroinnerText
itextContent
mają różne zachowania, powyższy kod nie jest wiernymtextContent
oszustwem - jest to potencjalnie ważne, ale niekoniecznie oczywiste!Możliwe jest również emulowanie
innerText
zachowania w innych przeglądarkach:źródło
pre
s, ponieważ podwoi nowe linie. Podejrzewam, że tutaj jest więcej błędów.