ในการพัฒนาส่วนหน้ามักจำเป็นต้องหลบหนีจากวงเล็บมุมซ้ายและขวาของ HTML ในรูปแบบเอนทิตี เราไม่สามารถแสดง <,>, & ฯลฯ ได้โดยตรงบนหน้าเว็บที่เราเห็นในที่สุด จะต้องหลบหนีก่อนที่จะสามารถแสดงบนหน้าเว็บ
ลำดับการหลบหนีเรียกอีกอย่างว่าตัวละครเอนทิตี เหตุผลหลักในการกำหนดสายที่หลบหนีคือ
สัญลักษณ์เช่น "<" และ ">" ถูกนำมาใช้เพื่อเป็นตัวแทนแท็ก HTML ดังนั้นจึงไม่สามารถใช้โดยตรงเป็นสัญลักษณ์ในข้อความ แต่บางครั้งความต้องการคือการใช้สัญลักษณ์เหล่านี้ในหน้า HTML ดังนั้นจึงจำเป็นต้องกำหนดสตริงหลบหนี
อักขระบางตัวไม่ได้กำหนดไว้ในชุดอักขระ ASCII (เช่นสัญลักษณ์ลิขสิทธิ์ "©") ดังนั้นจึงจำเป็นต้องใช้อักขระหลบหนี (อักขระหลบหนีที่สอดคล้องกับ "©" คือ "©") เพื่อเป็นตัวแทนของพวกเขา
นี่คือสองฟังก์ชั่นการหลบหนีและ Unsescape ซึ่งตามลำดับซึ่งใช้การหลบหนีของ HTML เป็นเอนทิตีและหมุน
วิธี 1. ตารางการทำแผนที่ + การเปลี่ยนปกติ
การคัดลอกรหัสมีดังนี้:
var keys = object.keys || ฟังก์ชั่น (obj) {
obj = วัตถุ (obj)
var arr = []
สำหรับ (var a ใน 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 = {
Escape: regexp ('[' + keys (entitymap.escape) .join ('') + ']', 'g'),
Unsescape: regexp ('(' + keys (entitymap.unescape) .Join ('|') + ')', 'g')
-
// หลบหนี HTML ไปยังเอนทิตี
ฟังก์ชั่น Escape (HTML) {
if (typeof html! == 'string') return ''
ส่งคืน html.replace (entityreg.escape, ฟังก์ชั่น (จับคู่) {
return entitymap.escape [Match]
-
-
// หมุนเอนทิตีกลับเป็น html
ฟังก์ชั่น Unsescape (Str) {
if (typeof str! == 'string') return ''
return str.replace (entityreg.unescape, ฟังก์ชั่น (จับคู่) {
return entitymap.unescape [Match]
-
-
วิธีที่ 2: ใช้ประโยชน์จากเบราว์เซอร์ DOM API
การคัดลอกรหัสมีดังนี้:
// หลบหนี HTML ไปยังเอนทิตี
ฟังก์ชั่น Escape (HTML) {
var elem = document.createElement ('div')
var txt = document.createtextNode (HTML)
Elem.AppendChild (txt)
return elem.innerhtml;
-
// หมุนเอนทิตีกลับเป็น html
ฟังก์ชั่น Unsescape (Str) {
var elem = document.createElement ('div')
elem.innerhtml = str
return elem.innertext || elem.textContent
-
มีข้อบกพร่องที่มีเพียง "<> &" เท่านั้นที่สามารถหลบหนีได้และสำหรับคำพูดเดียวคำพูดสองครั้งจะไม่ถูกหลบหนี อื่น ๆ ที่ไม่ใช่ ASCII ไม่สามารถหลบหนีได้เช่นกัน ให้ความสนใจเมื่อเลือก
เปรียบเทียบ:
วิธีที่ 1 ปริมาณรหัสมีขนาดใหญ่ แต่ความยืดหยุ่นและความสมบูรณ์ดีกว่าวิธีที่ 2. ตารางการทำแผนที่สามารถเพิ่มหรือลดลงตามข้อกำหนดและสามารถทำงานในสภาพแวดล้อม JS ใด ๆ
วิธีที่ 2 เป็นวิธีการแฮ็คที่มีรหัสน้อยกว่ามากและคุณสามารถหลบหนีและเปลี่ยนเส้นทางได้โดยใช้ API ภายในของเบราว์เซอร์ (เบราว์เซอร์หลักทั้งสองรองรับ) มันไม่สมบูรณ์และเป็นที่ชัดเจนว่าสามารถใช้ในสภาพแวดล้อมของเบราว์เซอร์เท่านั้น (เช่นไม่ทำงานใน node.js)