Saya memiliki beberapa kode JavaScript yang berfungsi di IE yang berisi yang berikut:
myElement.innerText = "foo";
Namun, tampaknya properti 'innerText' tidak berfungsi di Firefox. Apakah ada yang setara dengan Firefox? Atau adakah properti lintas browser yang lebih umum yang dapat digunakan?
Jawaban:
Firefox menggunakan properti textContent yang sesuai dengan W3C .
Saya kira Safari dan Opera juga mendukung properti ini.
sumber
innerText
adalah / akan didukung di FF pada 2016.innerText
hanya menggunakan dan mengharapkannya berfungsi (dengan kemungkinan quirks) pada semua browser saat ini dalam waktu dekat, dan juga IE-lama.innerText
adalah sangat berbeda daritextContent
, dan benar-benar sangat berguna (mengejutkan dari IE permainan kata-kata dianggap ...):innerText
mencoba untuk memberikan perkiraan bagaimana teks sebenarnya disajikan dalam browser, benar-benar tidak sepertitextContent
yang kembali hanya tentang tag- sumber markup dilucuti , menambahkan sedikit nilai, atau bahkan masalah ekstra (seperti hilangnya batas kata).Pembaruan : Saya menulis posting blog yang merinci semua perbedaan jauh lebih baik.
Firefox menggunakan standar W3C
Node::textContent
, tetapi perilakunya berbeda "sedikit" dari milik MSHTMLinnerText
(disalin oleh Opera juga, beberapa waktu lalu, di antara lusinan fitur MSHTML lainnya).Pertama-tama,
textContent
representasi spasi putih berbeda dariinnerText
satu. Kedua, dan yang lebih penting,textContent
termasuk semua konten tag SCRIPT , sedangkan innerText tidak.Hanya untuk membuat hal-hal lebih menghibur, Opera - selain menerapkan standar
textContent
- memutuskan untuk juga menambahkan MSHTMLinnerText
tetapi mengubahnya untuk bertindak sebagaitextContent
- yaitu termasuk konten SCRIPT (pada kenyataannya,textContent
daninnerText
di Opera tampaknya menghasilkan hasil yang identik, mungkin hanya saling alias) .textContent
adalah bagian dariNode
antarmuka, sedangkaninnerText
bagian dariHTMLElement
. Ini, misalnya, berarti Anda dapat "mengambil"textContent
tetapi tidakinnerText
dari simpul teks:Akhirnya, Safari 2.x juga memiliki
innerText
implementasi buggy . Di Safari,innerText
berfungsi dengan baik hanya jika suatu elemen tidak disembunyikan (melaluistyle.display == "none"
) atau menjadi yatim dari dokumen. Jika tidak,innerText
hasil dalam string kosong.Saya bermain dengan
textContent
abstraksi (untuk mengatasi kekurangan ini), tetapi ternyata agak rumit .Anda bertaruh terbaik adalah menentukan terlebih dahulu persyaratan persis Anda dan mengikuti dari sana. Seringkali dimungkinkan untuk menghapus tag
innerHTML
dari suatu elemen, alih-alih menangani semua kemungkinantextContent
/innerText
penyimpangan.Kemungkinan lain, tentu saja, adalah berjalan di pohon DOM dan mengumpulkan node teks secara rekursif.
sumber
innerText
di Chrome. jsperf.com/text-content/3textContent
sekarang didukung di IE9 +, tetapi Firefox masih tidak mendukunginnerText
(walaupun mereka menambahkan IE-diperkenalkanouterHTML
hanya beberapa hari yang lalu).Node.textContent
kemajuan yang cukup lengkap sedang berlangsung di sini: github.com/usmonster/aight/blob/node-textcontent-shim/js/… (semoga segera dimasukkan dalam aight ).innerText
adalah / akan didukung di FF pada 2016.Jika Anda hanya perlu mengatur konten teks dan tidak mengambil, inilah versi DOM sepele yang dapat Anda gunakan di browser apa pun; tidak memerlukan ekstensi IE innerText IE atau properti DOM Level 3 Core textContent.
sumber
!==
operator, kebalikan dari===
. Perbandingan jenis-sensitif yang digunakan oleh===
/!==
biasanya lebih disukai daripada komparator longgar==
/!=
.!==null
sepenuhnya dengan cara) daripada hanya mengganti loop denganelement.innerHTML=''
(yang ditetapkan untuk melakukan pekerjaan yang sama persis dengan loop dan kemudian saya ingat .. .: tabel di (legacy-) IE ... ericvasilik.com/2006/07/code-karma.html Mungkin saya sarankan menambahkan deskripsi singkat tentang 'efek samping ' yang tersembunyi dan hampir tidak pernah didokumentasikan 'efek samping' daricreateTextNode
penggantian amp lt dan gt ke entitas karakter html masing-masing? Tautan ke perilaku yang tepat akan lebih baik!jQuery menyediakan
.text()
metode yang dapat digunakan di browser apa pun. Sebagai contoh:sumber
Sesuai jawaban Prakash K, Firefox tidak mendukung properti innerText. Jadi, Anda cukup menguji apakah agen pengguna mendukung properti ini dan melanjutkannya seperti di bawah ini:
sumber
Baris Javascript yang sangat sederhana bisa mendapatkan teks "non-taggy" di semua browser utama ...
sumber
textContent
daninnerText
melaporkan spasi putih yang mungkin penting untuk beberapa kasus penggunaan.||
, yaitu:var myText = (myElement.innerText || myElement.textContent || "") ;
untuk mengatasi nilai yang tidak ditentukan.Perhatikan bahwa
Element::innerText
properti tidak akan mengandung teks yang telah disembunyikan oleh gaya CSS "display:none
" di Google Chrome (juga akan menjatuhkan konten yang telah disembunyikan oleh teknik CSS lainnya (termasuk ukuran font: 0, warna: transparan, dan beberapa efek serupa lainnya yang menyebabkan teks tidak ditampilkan dengan cara apa pun yang terlihat).Properti CSS lainnya juga dipertimbangkan:
<br \>
yang menghasilkan baris inline juga akan menghasilkan baris baru dalam nilai innerText.Tetapi
Element::textContent
akan tetap mengandung SEMUA konten elemen teks dalam secara independen dari CSS yang diterapkan bahkan jika mereka tidak terlihat. Dan tidak ada baris baru atau spasi putih akan dihasilkan dalam textContent, yang mengabaikan semua gaya dan struktur dan inline / blok atau jenis elemen dalam yang diposisikan.Operasi salin / rekat menggunakan pilihan mouse akan membuang teks tersembunyi dalam format teks biasa yang dimasukkan ke clipboard, sehingga tidak akan berisi semua yang ada di
textContent
, tetapi hanya apa yang ada di dalamnya.innerText
(setelah spasi putih / generasi baris baru seperti di atas) .Kedua properti kemudian didukung di Google Chrome, tetapi kontennya mungkin berbeda. Browser lama masih termasuk dalam innetText, semua seperti isi textContent sekarang (tetapi perilaku mereka dalam kaitannya dengan generasi spasi putih / baris baru tidak sesuai).
jQuery akan menyelesaikan ketidakkonsistenan ini di antara browser menggunakan metode ".text ()" yang ditambahkan ke elemen yang diuraikan yang dikembalikan melalui kueri $ (). Secara internal, ini memecahkan kesulitan dengan melihat ke dalam DOM HTML, hanya bekerja dengan level "simpul". Jadi itu akan mengembalikan sesuatu yang lebih mirip dengan konten teks standar.
Peringatannya adalah bahwa metode jQuery ini tidak akan menyisipkan spasi tambahan atau jeda baris yang mungkin terlihat di layar yang disebabkan oleh subelemen (seperti
<br />
) konten.Jika Anda merancang beberapa skrip untuk aksesibilitas dan lembar gaya Anda diuraikan untuk rendering non-aural, seperti plugin yang digunakan untuk berkomunikasi dengan pembaca Braille, alat ini harus menggunakan konten TextContent jika harus menyertakan tanda baca spesifik yang ditambahkan dalam bentang yang ditata dalam bentang yang ditata dengan gaya "display: none" dan yang biasanya disertakan dalam halaman (misalnya untuk superskrip / subskrip), jika tidak, innerText akan sangat membingungkan pembaca Braille.
Teks yang disembunyikan oleh trik CSS sekarang biasanya diabaikan oleh mesin pencari utama (yang juga akan mengurai CSS halaman HTML Anda, dan juga akan mengabaikan teks yang tidak memiliki warna kontras di latar belakang) menggunakan parser HTML / CSS dan properti DOM. "innerText" persis seperti di browser visual modern (setidaknya konten tidak terlihat ini tidak akan diindeks sehingga teks tersembunyi tidak dapat digunakan sebagai trik untuk memaksa dimasukkannya beberapa kata kunci di halaman untuk memeriksa kontennya); tetapi teks tersembunyi ini akan tetap ditampilkan di halaman hasil (jika halaman tersebut masih memenuhi syarat dari indeks untuk dimasukkan dalam hasil), menggunakan properti "textContent" alih-alih HTML lengkap untuk menghapus gaya dan skrip tambahan.
JIKA Anda menetapkan beberapa teks biasa di salah satu dari dua properti ini, ini akan menimpa markup dalam dan gaya yang diterapkan padanya (hanya elemen yang ditugaskan akan menyimpan jenis, atribut, dan gaya), sehingga kedua properti kemudian akan berisi konten yang sama . Namun, beberapa browser sekarang tidak lagi menghormati penulisan ke innerText, dan hanya akan membiarkan Anda menimpa properti textContent (Anda tidak dapat menyisipkan markup HTML saat menulis ke properti ini, karena karakter khusus HTML akan dikodekan dengan benar menggunakan referensi karakter numerik untuk muncul secara harfiah , jika Anda membaca
innerHTML
properti setelah penugasaninnerText
atautextContent
.sumber
innerText
. Dalam pengujian saya, hanya "tampilan: tidak ada" dan "visibilitas: tersembunyi" yang diabaikan.Sunting (terima kasih kepada Mark Amery untuk komentar di bawah): Hanya lakukan dengan cara ini jika Anda tahu tanpa keraguan bahwa tidak ada kode yang akan mengandalkan memeriksa keberadaan properti ini, seperti (misalnya) jQuery melakukannya. Tetapi jika Anda menggunakan jQuery, Anda mungkin hanya akan menggunakan fungsi "text" dan melakukan $ ('# myElement'). Text ('foo') seperti yang ditunjukkan beberapa jawaban lainnya.
sumber
innerText
atautextContent
properti untuk memutuskan mana yang akan digunakan. Dengan menyetel keduanya ke string, Anda akan membuat kode orang lain yang bekerja pada elemen tersebut secara keliru mendeteksi bahwa browser mendukung kedua properti; akibatnya kode tersebut dapat berperilaku tidak pantas.innerText
telah ditambahkan ke Firefox dan harus tersedia dalam rilis FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412Draf spesifikasi telah ditulis dan diharapkan dapat dimasukkan ke dalam standar hidup HTML di masa mendatang: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465
Perhatikan bahwa saat ini implementasi Firefox, Chrome dan IE semuanya tidak kompatibel. Ke depan, kita mungkin bisa berharap Firefox, Chrome dan Edge untuk menyatu sementara IE yang lama tetap tidak kompatibel.
Lihat juga: https://github.com/whatwg/compat/issues/5
sumber
innerText
. JikatextContent
merupakan fallback yang dapat diterima dan Anda perlu mendukung Fx lama, maka gunakan(innerText || textContent)
. Jika Anda ingin implementasi yang identik di semua browser, saya tidak percaya ada polyfill khusus untuk ini tetapi beberapa kerangka kerja (misalnya jQuery) mungkin sudah mengimplementasikan sesuatu yang serupa - lihat jawaban lain di halaman ini.innerText
, yaitu: Teks yang terlihat di halaman, di Firefox> = 38 (untuk addon) Setidaknya,<script>
tag harus dihilangkan sepenuhnya. jQuery$('#body').text()
tidak bekerja untuk saya. Tetapi sebagai solusiinnerText || textContent
tidak apa-apa. Terima kasih.textContent
untuk saat ini.Bagaimana dengan sesuatu yang seperti ini?
** Saya perlu membuat huruf besar milik saya.
sumber
Seperti pada tahun 2016 dari Firefox v45,
innerText
bekerja di firefox, lihat dukungannya: http://caniuse.com/#search=innerTextJika Anda ingin bekerja pada versi Firefox sebelumnya, Anda dapat menggunakan
textContent
, yang memiliki dukungan lebih baik pada Firefox tetapi lebih buruk pada versi IE yang lebih lama : http://caniuse.com/#search=textContentsumber
Ini telah menjadi pengalaman saya dengan
innerText
,textContent
,innerHTML
, dan nilai:yaitu = internet explorer, ff = firefox, ch = google chrome. note 1: ff bekerja sampai setelah nilai dihapus dengan backspace - lihat catatan oleh Ray Vega di atas. Catatan 2: berfungsi agak di chrome - setelah pembaruan itu tidak berubah maka Anda klik dan klik kembali ke bidang dan nilai muncul. Yang terbaik dari semuanya adalah
elem.value = changeVal
; yang saya tidak berkomentar di atas.sumber
Hanya pengeposan ulang dari komentar di bawah posting asli. innerHTML berfungsi di semua browser. Terima kasih stefita.
myElement.innerHTML = "foo";
sumber
innerHTML
bukan pengganti yang memadai untuktextContent
/innerText
kecuali Anda dapat memastikan bahwa teks yang Anda tetapkan tidak mengandung tag atau sintaks HTML lainnya. Untuk data apa pun yang disediakan oleh pengguna, Anda pasti tidak memiliki jaminan itu. Mendorong pendekatan ini tanpa peringatan itu berbahaya mengingat dapat menyebabkan lubang keamanan XSS . Dengan begitu banyak pendekatan aman yang tersedia, tidak ada alasan untuk mempertimbangkan yang satu ini..innerHTML
, kode Anda rusak dan Anda berpotensi rentan terhadap XSS. Apa yang terjadi jika string itu"<script>alert(1)</script>"
?<script>
tag yang disisipkan viainnerHTML
tidak boleh dijalankan. Tapi itu tidak melindungi browser lama. Juga, HTML5innerHTML
TIDAK akan melindungi misalnya"<img src='x' onerror='alert(1)'>"
.temukan ini di sini:
sumber
textContent
secara asli ? Perlu juga dicatat bahwa karenainnerText
dantextContent
memiliki perilaku yang berbeda, kode di atas bukantextContent
shim yang setia - ini berpotensi penting, tetapi belum tentu jelas!Mungkin juga untuk meniru
innerText
perilaku di browser lain:sumber
pre
s akan menggandakan baris baru. Saya curiga ada yang salah di sini.