Bagaimana untuk Melarikan Diri Aksara HTML dalam JavaScript dengan Berkesan?

Cara Melaksanakan Melarikan Aksara HTML dalam JavaScript

Apabila bekerja dengan data HTML dalam JavaScript, selalunya perlu untuk melepaskan aksara khas seperti < ;, >, dan & untuk menghalangnya daripada ditafsirkan sebagai sintaks penanda. Walaupun PHP menyediakan fungsi asli yang dipanggil htmlspecialchars untuk tujuan ini, JavaScript tidak mempunyai persamaan langsung.

Melaksanakan Fungsi Melarikan Aksara HTML

Untuk meniru kefungsian htmlspecialchars dalam JavaScript, anda boleh mencipta fungsi tersuai. Walau bagaimanapun, menggunakan fungsi terbina dalam adalah lebih baik jika tersedia.

Literal Templat ES6

literal templat ES6 memperkenalkan, yang menawarkan cara mudah untuk melepaskan aksara HTML. Walau bagaimanapun, pendekatan ini hanya terlepas daripada kejadian pertama bagi setiap aksara khas, yang membawa kepada keputusan yang salah untuk rentetan yang mengandungi berbilang kejadian aksara yang sama.

Fungsi Penggantian Tersuai

Kepada memastikan melarikan diri dengan betul, fungsi penggantian tersuai boleh digunakan. Fungsi ini menggantikan setiap aksara khas dengan entiti HTML yang sepadan:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "&amp;lt;")
      .replace(/>/g, "&amp;gt;")
      .replace(/&quot;/g, "&amp;quot;")
      .replace(/'/g, "&#039;");
}

Menggunakan Peta Aksara

Untuk prestasi yang lebih baik dengan blok teks yang besar, peta aksara boleh digunakan untuk menggantikan aksara khas dengan lebih cekap:

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&amp;lt;',
    '>': '&amp;gt;',
    '&quot;': '&amp;quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&amp;<>&quot;']/g, function(m) { return map[m]; });
}

Dengan menggunakan teknik ini, anda boleh melepaskan aksara HTML dengan berkesan dalam JavaScript, memastikan ia dipaparkan dengan betul dalam dokumen HTML.

Atas ialah kandungan terperinci Bagaimana untuk Melarikan Diri Aksara HTML dalam JavaScript dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!