Unescape HTML là gì?

JavaScript, Chuỗi, Trình duyệt, Regexp · 22 Tháng 10, 2020

Các ký tự HTML đã thoát Unescapes

• Sử dụng String.prototype.replace() với biểu thức chính quy khớp với các ký tự cần thoát
• Sử dụng lệnh gọi lại của hàm để thay thế từng phiên bản ký tự đã thoát bằng ký tự chưa thoát được liên kết của nó bằng cách sử dụng từ điển (đối tượng)

const unescapeHTML = str =>
  str.replace(
    /&|<|>|'|"/g,
    tag =>
      ({
        '&': '&',
        '<': '<',
        '>': '>',
        ''': "'",
        '"': '"'
      }[tag] || tag)
  );

Hơn như thế này

• Thoát một chuỗi để sử dụng trong HTML

• Chuyển đổi một chuỗi màu hsl() thành một đối tượng với các giá trị của mỗi màu

• Chuyển đổi một chuỗi màu rgb() thành một đối tượng với các giá trị của mỗi màu

Để bỏ thoát các thực thể HTML trong JavaScript, hãy sử dụng hàm unescaped(). Giả sử bạn muốn mã hóa ký tự đặc biệt bằng hàm unescape() −

document.write(unescape("Demo%20Text%20")); 

Trong bài viết này, chúng ta sẽ thấy hai ví dụ -

• Thực thể Unescape
• Giải mã chuỗi mã hóa

Thực thể Unescape

Ví dụ

Đối với unescape, chúng ta sẽ sử dụng phương thức unescape() trong JavaScript. Hãy để chúng tôi xem một ví dụ -

   
Demo Heading
   

 

đầu ra

Giải mã chuỗi mã hóa

Sử dụng escape() để mã hóa và unescape() để giải mã. Ở đây, chúng ta sẽ thiết lập một chuỗi mẫu trong phương thức escape() để mã hóa -

Thao tác này sẽ bỏ thoát văn bản, vì vậy chúng ta có thể trả lại văn bản chưa thoát sau đó bằng cách lấy văn bản từ vùng văn bản

Chẳng hạn, chúng ta có thể viết

const htmlDecode = (input) => {
  const e = document.createElement('textarea');
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}const result = htmlDecode("<img src='myimage.jpg'>");
console.log(result)

Chúng ta có một hàm htmlDecode nhận chuỗi input làm tham số

Trong hàm, chúng ta tạo phần tử textarea với phần tử document.createElement

Sau đó, chúng tôi đặt innerHTML của nó thành input

Sau đó, chúng tôi nhận được văn bản chưa thoát bằng cách lấy thuộc tính childNodes[0].nodeValue và trả lại

Bây giờ khi chúng tôi chuyển vào một chuỗi đã thoát, chúng tôi sẽ lấy lại phiên bản chưa thoát

Vì vậy,

const htmlDecode = (input) => {
  const doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}const result = htmlDecode("<img src='myimage.jpg'>");
console.log(result)

const htmlDecode = (input) => {
  const doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}const result = htmlDecode("<img src='myimage.jpg'>");
console.log(result)

Một cách khác để bỏ thoát một chuỗi là sử dụng phương thức

const htmlDecode = (input) => {
  const doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}const result = htmlDecode("<img src='myimage.jpg'>");
console.log(result)

Để sử dụng nó, chúng tôi chuyển vào chuỗi đã thoát và loại MIME của chuỗi để trả về

Chẳng hạn, chúng ta có thể sử dụng nó bằng cách viết

const htmlDecode = (input) => {
  const doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}const result = htmlDecode("<img src='myimage.jpg'>");
console.log(result)

Chúng tôi tạo một phiên bản

const htmlDecode = (input) => {
  const doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}const result = htmlDecode("<img src='myimage.jpg'>");
console.log(result)

Sau đó, chúng tôi gọi

const htmlDecode = (input) => {
  const doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}const result = htmlDecode("<img src='myimage.jpg'>");
console.log(result)

Việc sử dụng Unescape HTML là gì?

Ý nghĩa của từ Unescape là gì?

Hàm Unescape() và escape() là gì?

Làm cách nào để thoát JavaScript HTML?