HTML contains special characters such as ‘,’ ‘/,’ and many more such as single and double commas. These special characters are used for the HTML tag, such as ‘’ is used to close the HTML tag. This tutorial teaches us to escape HTML special characters in JavaScript.
Sekarang, pertanyaannya adalah bagaimana jika kita ingin menggunakan karakter ini di dalam konten HTML?
Misalnya, kita perlu merender string di bawah ini ke browser
tutorialsPointJika kita langsung menambahkan string di atas dalam HTML, itu dianggap sebagai tag tebal tetapi kita ingin menggunakannya sebagai string
Untuk mengatasi masalah di atas, kita harus menggunakan Unicode untuk semua karakter khusus. Di sini, kami akan mengganti semua karakter khusus dengan Unicode untuk keluar dari karakter khusus HTML dan menggunakannya di dalam string HTML
Ada berbagai pendekatan untuk memecahkan masalah di atas yang diberikan di bawah ini
- Menggunakan metode createTextNode()
- Menggunakan atribut textContent
- Menggunakan metode replace()
Menggunakan metode createTextNode()
Dalam pendekatan ini, kita akan menggunakan metode createTextNode() dari HTML DOM. Kita hanya perlu meneruskan string ke metode sebagai argumen, yang mengembalikan string yang disandikan
Sintaksis
Var converted_string = document.createTextNode(string);_Parameter
String − Kita dapat melewatkan string HTML apa pun sebagai argumen untuk keluar dari karakter khusus dan menyandikannya
Contoh 1
Contoh di bawah ini menunjukkan penggunaan metode createTextNode(string) dalam JavaScript
Escape HTML special Chars in JavaScript.
String After escaping the special characters:
Untuk output contoh di atas, pengguna dapat mengamati bahwa kita telah membuat string yang disandikan menggunakan metode createTextNode() dan memasukkannya ke dalam HTML DOM. Itu merender karakter khusus apa adanya tanpa menganggapnya sebagai elemen tag
Menggunakan atribut textContent
Kita dapat membuat elemen HTML dalam JavaScript dan menambahkan string HTML. Kita dapat menggunakan properti textContent dari elemen Textarea HTML dan menyisipkan string HTML. Setelah itu, kita bisa mendapatkan string yang disandikan dengan Unicode menggunakan properti innerHTML
Sintaksis
let textAreaDiv = document.createElement( 'textarea' ); textAreaDiv.textContent = HTML_String; let encoded_string = textAreaDiv.innerHTML;Parameter
HTML_string − Kami dapat melewatkan string HTML apa pun yang ingin kami enkode sebagai parameter ini
Contoh 2
Pengguna dapat mengikuti contoh di bawah ini untuk melihat demonstrasi dari pendekatan di atas
Escape HTML special Chars in javascript.
String After escaping the special characters.
_
Pengguna dapat melihat pada output di bawah ini bagaimana kita dapat menyandikan string menggunakan properti textContent
Menggunakan metode Ganti()
Dalam pendekatan ini, kita akan menggunakan metode replace() dari JavaScript. Kita bisa menggunakan metode replace() untuk mengganti satu karakter dengan karakter lain. Di sini, Kami akan mengganti semua karakter khusus dalam string HTML dengan Unicode mereka dengan menggunakan metode replace()
Sintaksis
html_string.replace( old_char, new_char )Parameter
Html_string − Ini adalah string di mana kita harus keluar dari karakter khusus
Old_char − Ini adalah karakter dalam string yang perlu diganti
New_char − Ini adalah karakter yang akan kita tambahkan ke string pada posisi karakter lama
Contoh 3
Contoh di bawah ini menunjukkan bagaimana kita dapat menyandikan string HTML dengan mengganti karakter khusus menggunakan metode replace()
Escape HTML special chars
Result after escaping the special characters.
_Pengguna dapat melihat bahwa kami telah berhasil mengganti semua karakter khusus menggunakan metode penggantian, dan kami dapat merender string apa adanya dengan karakter khusus
Kesimpulan
Dalam tutorial ini, kita telah mempelajari tiga pendekatan untuk mengganti karakter khusus dalam HTML. Pengguna dapat menggunakan metode apa pun sesuai dengan kebutuhan mereka
Anda hampir pasti menemukan entitas di halaman HTML. Biasanya digunakan untuk karakter internasional, operator matematika, bentuk, panah, dan simbol lainnya. Sebagai contoh
♠ ♣ ♥ ♦ © ®Peta ini langsung ke karakter UTF-8. Simbol untuk PI (π) dapat ditulis sebagai π atau angka UTF-8 π. Anda dapat mencari simbol populer di Referensi Entitas Karakter HTML untuk menemukan kode entitas HTML dan nomor indeks UTF-8 mereka
Sebenarnya, tidak perlu menggunakan kode ini jika Anda menyajikan halaman sebagai UTF-8; . Namun, ada kalanya Anda tidak menggunakan UTF-8, karakter yang berdekatan menyebabkan masalah, atau sulit untuk memasukkan simbol tertentu di keyboard Anda. Demikian pula, Anda mungkin menggunakan ANSI atau metode penyandian lain untuk file CSS dan JavaScript
Entitas dalam CSS
Menambahkan konten melalui elemen semu semakin umum — terutama jika Anda menggunakan ikon webfont. Untuk menambahkan karakter UTF-8 apa pun, Anda perlu menemukan nomornya dan mengonversinya menjadi heksadesimal. Untuk Pi, ini 03C0. Ini dapat ditambahkan dalam file CSS menggunakan garis miring terbalik sebelumnya, mis. g
#pi:before { content: "\03C0"; } _Entitas dalam JavaScript
Seperti CSS, JavaScript memerlukan angka UTF-8 dalam heksadesimal. Dalam hal ini, bagaimanapun, itu harus diloloskan menggunakan "u" sebelumnya, e. g
var pi = "u03C0"; _Jika kode karakter 255 atau kurang, Anda juga dapat menggunakan notasi heksadesimal 2 digit JavaScript standar, mis. g
var copyright = "xA9";Hanya itu saja. Solusi sederhana, tapi yang selalu saya lupakan
Bagikan Artikel Ini
Craig Buckler
Craig adalah konsultan web lepas Inggris yang membangun halaman pertamanya untuk IE2. 0 pada tahun 1995. Sejak saat itu dia menganjurkan standar, aksesibilitas, dan praktik terbaik teknik HTML5. Dia membuat spesifikasi perusahaan, situs web, dan aplikasi online untuk perusahaan dan organisasi termasuk Parlemen Inggris, Parlemen Eropa, Departemen Energi & Perubahan Iklim, Microsoft, dan banyak lagi. Dia telah menulis lebih dari 1.000 artikel untuk SitePoint dan Anda dapat menemukannya di @craigbuckler