في التنمية الأمامية ، غالبًا ما يكون من الضروري الهروب من أقواس الزاوية اليسرى واليمنى لـ HTML في أشكال الكيان. لا يمكننا عرض <،> ، وما إلى ذلك مباشرة على صفحة الويب التي نراها أخيرًا. يجب الهروب قبل عرضه على صفحة الويب.
يسمى تسلسل الهروب أيضًا كيان الشخصية. السبب الرئيسي لتحديد السلاسل النار هو
تم استخدام رموز مثل "<" و ">" لتمثيل علامة HTML ، لذلك لا يمكن استخدامها مباشرة كرموز في النص. ولكن في بعض الأحيان تكون الحاجة هي استخدام هذه الرموز على صفحات HTML ، لذلك تحتاج إلى تحديد سلسلة الهروب.
لم يتم تعريف بعض الأحرف في مجموعة أحرف ASCII (مثل رمز حقوق الطبع والنشر "©"). لذلك ، من الضروري استخدام أحرف الهروب (شخصية الهروب المقابلة لـ "©" هي "©") لتمثيلها.
فيما يلي وظيفتان هربتان و unescape ، والتي تنفذ على التوالي هروب HTML ككيانات وتدور.
الطريقة 1. جدول رسم الخرائط + استبدال منتظم
نسخة الكود كما يلي:
var keys = object.keys || وظيفة (OBJ) {
OBJ = كائن (OBJ)
var arr = []
لـ (var a in obj) arr.push (a)
إرجاع arr
}
var invert = function (obj) {
OBJ = كائن (OBJ)
var result = {}
لـ (var a in obj) نتيجة [obj [a]] = a
نتيجة العودة
}
var entitymap = {
يهرب: {
'&': '&' ،
'<': '<' ،
'>': '>' ،
"": "" "،
"" ": '' '
}
}
entitymap.unescape = invert (entitymap.escape)
var entityreg = {
الهروب: regexp ('[' + Keys (entitymap.escape).
unescape: regexp ('(' + Keys (entitymap.unescape).
}
// الهروب من HTML إلى الكيان
وظيفة الهروب (html) {
إذا (typeof html! == 'string') return ''
إرجاع html.replace (entityreg.escape ، وظيفة (مطابقة) {
إرجاع entitymap.escape [Match]
})
}
// أعاد الكيان إلى HTML
وظيفة unescape (str) {
إذا (typeof str! == 'string') return ''
إرجاع str.replace (entityreg.unescape ، وظيفة (مطابقة) {
إرجاع entitymap.unescape [Match]
})
}
الطريقة 2: استخدام المستعرض DOM API
نسخة الكود كما يلي:
// الهروب من HTML إلى الكيان
وظيفة الهروب (html) {
var elem = document.createElement ('div')
var txt = document.createTextNode (html)
elem.appendchild (txt)
إرجاع elem.innerhtml ؛
}
// أعاد الكيان إلى HTML
وظيفة unescape (str) {
var elem = document.createElement ('div')
elem.innerhtml = str
إرجاع elem.innertext || elem.textContent
}
هناك عيب لا يمكن الهروب منه "<> &" فقط ، وبالنسبة للاقتباسات الفردية ، لا يتم هروب عروض الأسعار المزدوجة. لا يمكن الهروب من غير ASCII الأخرى أيضًا. انتبه عند الاختيار.
يقارن:
الطريقة 1 يكون حجم الكود كبيرًا ، لكن المرونة والنزاهة أفضل من الطريقة 2. يمكن إضافة أو تخفيض CAPPANT TABLE ENTITYMAP وفقًا للمتطلبات ، ويمكن تشغيله في أي بيئة JS.
الطريقة 2 هي طريقة اختراق ، مع كمية أقل بكثير من التعليمات البرمجية ، ويمكنك الهروب وإعادة توجيهها باستخدام واجهة برمجة التطبيقات الداخلية للمتصفح (يدعم كل من المتصفحات الرئيسية). لم يكتمل ، ومن الواضح أنه لا يمكن استخدامه إلا في بيئة المتصفح (مثل عدم التشغيل في Node.js).