Kode karakter html dalam javascript

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 open the HTML tag. The ‘/’ and ‘>’ 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

 tutorialsPoint 

Jika 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

Bagaimana cara menyandikan karakter khusus HTML dalam JavaScript?

Bagaimana cara mendapatkan kode karakter dalam JavaScript?

Bagaimana cara menyandikan nilai HTML dalam JavaScript?