สองวิธีการใช้งานเพื่อหลบหนีจากวงเล็บมุมซ้ายและขวาของ HTML ในรูปแบบเอนทิตี

ในการพัฒนาส่วนหน้ามักจำเป็นต้องหลบหนีจากวงเล็บมุมซ้ายและขวาของ 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)