Dalam pengembangan front-end, sering kali perlu melarikan diri dari kurung sudut kiri dan kanan HTML ke dalam bentuk entitas. Kami tidak dapat menampilkan <,>, & dll. Langsung di halaman web yang akhirnya kami lihat. Perlu melarikan diri sebelum dapat ditampilkan di halaman web.
Urutan pelarian juga disebut entitas karakter. Alasan utama untuk mendefinisikan string yang melarikan diri adalah
Simbol seperti "<" dan ">" telah digunakan untuk mewakili tag HTML, sehingga mereka tidak dapat digunakan secara langsung sebagai simbol dalam teks. Tetapi kadang -kadang kebutuhan adalah menggunakan simbol -simbol ini pada halaman HTML, sehingga perlu menentukan string pelariannya.
Beberapa karakter tidak didefinisikan dalam set karakter ASCII (seperti simbol hak cipta "©"). Oleh karena itu, perlu menggunakan karakter pelarian (karakter pelarian yang sesuai dengan "©" adalah "©") untuk mewakili mereka.
Berikut adalah dua fungsi melarikan diri dan unescape, yang masing -masing menerapkan pelarian HTML sebagai entitas dan berputar.
Metode 1. Tabel pemetaan + penggantian reguler
Salinan kode adalah sebagai berikut:
var keys = object.keys || fungsi (obj) {
obj = objek (obj)
var arr = []
untuk (var a di obj) arr.push (a)
return arr
}
var invert = function (obj) {
obj = objek (obj)
var result = {}
untuk (var a dalam obj) hasil [obj [a]] = a
hasil pengembalian
}
var entitymap = {
melarikan diri: {
'&': '&',
'<': '<'
'>': '>',
'"': '"',
"'":' ''
}
}
EntityMap.unescape = invert (entitymap.escape)
var entityreg = {
Escape: RegExp ('[' + Keys (EntityMap.escape) .join ('') + ']', 'g'),
Unescape: regexp ('(' + tombol (entitymap.unescape) .join ('|') + ')', 'g')
}
// melarikan diri dari html ke entitas
Function Escape (html) {
if (typeof html! == 'string') return ''
return html.replace (entityreg.escape, function (match) {
return entitymap.escape [kecocokan]
})
}
// Putar kembali entitas ke HTML
fungsi unescape (str) {
if (typeof str! == 'string') return ''
return str.replace (entityreg.unescape, function (match) {
return entitymap.unescape [kecocokan]
})
}
Metode 2: Memanfaatkan Dom API Browser
Salinan kode adalah sebagai berikut:
// melarikan diri dari html ke entitas
Function Escape (html) {
var elem = document.createelement ('div')
var txt = document.createTextNode (html)
elem.appendchild (txt)
return elem.innerhtml;
}
// Putar kembali entitas ke HTML
fungsi unescape (str) {
var elem = document.createelement ('div')
elem.innerhtml = str
return elem.innerText || Elem.TextContent
}
Ada cacat yang hanya "<> &" yang bisa diloloskan, dan untuk kutipan tunggal, kutipan ganda tidak lolos. Non-ASSASI lainnya juga tidak dapat diloloskan. Perhatikan saat memilih.
Membandingkan:
Metode 1 Volume kode besar, tetapi fleksibilitas dan integritas lebih baik daripada metode 2. EntityMap tabel pemetaan dapat ditambahkan atau dikurangi sesuai dengan persyaratan, dan dapat dijalankan di lingkungan JS apa pun.
Metode 2 adalah metode peretasan, dengan jumlah kode yang jauh lebih kecil, dan Anda dapat melarikan diri dan mengarahkannya kembali dengan menggunakan API internal browser (kedua browser utama mendukungnya). Tidak lengkap, dan jelas bahwa itu hanya dapat digunakan dalam lingkungan browser (seperti tidak berjalan di Node.js).