Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar aksara khas kepada HTML dalam Javascript?

Bagaimana untuk menukar aksara khas kepada HTML dalam Javascript?

PHPzke hadapan: 2023-09-03 17:41:02675semak imbas

Kami boleh menggunakan kaedah replace() untuk menukar aksara khas kepada HTML dalam JavaScript. Kaedah ini juga boleh digunakan pada peta. Terdapat banyak kaedah lain untuk tugas ini. Kami akan membincangkan kaedah ini secara terperinci dalam artikel ini. Kami mula-mula membincangkan keperluan untuk menukar aksara khas kepada HTML, dan kemudian kami akan membincangkan kaedah penukaran aksara khas. Mula-mula mari kita bercakap tentang beberapa konsep watak, dan kemudian kita akan membawa topik seterusnya.

Aksara khas perlu ditukar kepada HTML

Kami telah melihat pembangun kami menulis beribu-ribu baris kod untuk menyelesaikan tugas tertentu. Sekarang, katakan kita perlu menggunakan kurang daripada () simbol dalam halaman web atau aplikasi mudah alih menggunakan HTML sebagai bahasa skrip. Nah, ini menjadi masalah kerana simbol kurang daripada () mempunyai makna khusus untuk bahasa skrip HTML.

Bendera ini biasanya digunakan untuk memulakan teg dalam HTML. Begitu juga, menggunakan aksara khas dalam nilai atribut boleh menyebabkan atribut disalahtafsirkan. Jadi, untuk mengatasi masalah ini, kami mempunyai kod khas untuk setiap watak istimewa yang hadir semasa menggunakan HTML. Untuk memasukkan aksara khas dalam HTML, mulakan dengan ampersand (&), kemudian tanda paun (#), kemudian nombor kod, dan berakhir dengan koma bertitik (;). Sebagai contoh, simbol (hak cipta) boleh diwakili oleh ©.

Cara menukar aksara khas kepada HTML

Terdapat banyak cara untuk menukar aksara khas kepada HTML. Beberapa kaedah yang paling biasa disenaraikan di bawah.

Gunakan kaedah String.prototype.replace()

Kaedah String.prototype.replace() dalam JavaScript digunakan untuk menggantikan aksara khas dengan nilai lain dalam rentetan.

String.prototype.replace() mempunyai dua parameter, parameter pertama ialah nilai yang akan diganti, dan parameter kedua ialah nilai yang akan diganti dalam rentetan.

Kaedah ini mengembalikan rentetan baharu dengan semua nilai carian digantikan dengan nilai yang diperlukan dalam rentetan. Walau bagaimanapun, kaedah String.prototype.replace() tidak mengubah nilai rentetan sedia ada. Mari kita lihat contoh.

Contoh

<html>
<body>
   <p id="print"></p>
   <script>
      var string = "This is a <string>";
      string = string.replace(/</g, "<");
      document.getElementById("print").innerHTML = string;
   </script>
</body>
</html>

Gunakan String.prototype.replace() dengan Peta

Kaedah

String.prototype.replace() juga boleh digunakan dengan Peta dalam JavaScript. Di sini String.prototype.replace() juga mempunyai dua parameter Parameter pertama ialah corak ungkapan biasa yang akan diganti, dan parameter kedua ialah subrentetan yang sepadan.

Contoh

Mari lihat contoh penggunaan peta dengan string.prototype.replace() -

<html>
<body>
   <p id="print"></p>
   <script>
      const specialCharsMap = new Map([
         ["<", "<"],
         [">", ">"],
         ["&", "&"],
      ]);
      function replaceSpecialChars(string) {
         for (const [key, value] of specialCharsMap) {
            string = string.replace(new RegExp(key, "g"), value);
         }
         return string;
      }
      document.getElementById("print").innerHTML =
      replaceSpecialChars("This is a <string>");
   </script>
</body>
</html>

Gunakan fungsi encodeURIComponent()

Kami juga boleh menggunakan fungsi encodeURIComponent() dalam javascript untuk menggantikan aksara khas dengan nilai lain dalam rentetan. Kami biasanya menggunakan fungsi ini untuk mengekod komponen Uniform Resource Identifier (URI). Ia menggantikan aksara tertentu dalam rentetan dengan rakan sejawatannya yang terlepas untuk memastikan rentetan itu selamat untuk digunakan dalam URI.

Sekarang, untuk menggunakan fungsi ini, kita hanya perlu menghantar rentetan (str) sebagai parameter dalam fungsi tersebut. Kaedah ini juga mengembalikan rentetan baharu dengan semua nilai carian digantikan dengan nilai yang dikehendaki dalam rentetan. Seperti kaedah String.prototype.replace(), fungsi ini tidak mengubah nilai rentetan sedia ada. Mari kita lihat contoh.

Contoh

<html>
<body>
   <p id="print"></p>
   <script>
      var str = "Hello, < world > !";
      var newStr = encodeURIComponent(str);
      document.getElementById("print").innerHTML = newStr;
   </script>
</body>
</html>

Apabila menggunakan fungsi ini, anda harus ingat bahawa ia hanya berfungsi dengan beberapa aksara khas. Untuk mengendalikan beberapa aksara khas lain, anda mesti menggunakan berbilang kaedah atau logik tambahan untuk mengendalikannya.

Gunakan fungsi escape()

Fungsi

escape(), seperti fungsi encodeURIComponent(), digunakan untuk mengekod rentetan supaya ia tidak menyebabkan sebarang masalah dengan URL tapak web. Untuk menggunakan fungsi ini, kami hanya menghantar rentetan (str) sebagai parameter ke dalam fungsi. Kaedah ini juga mengembalikan rentetan baharu dengan semua nilai carian digantikan dengan nilai yang dikehendaki dalam rentetan.

Contoh

Ini adalah contoh fungsi escape() -

<html> 
<body>
   <p id="print"></p>
   <script>
      var str = "Hello, <world>!";
      var newStr = escape(str);
      document.getElementById("print").innerHTML = newStr;
   </script>
</body>
</html>

Kesimpulan

Dalam blog ini, kami mula-mula memperkenalkan watak istimewa, keperluan menukarnya dan pelbagai kaedah yang boleh anda gunakan untuk melakukan ini. Beberapa kaedah yang dibincangkan di sini adalah menggunakan String.prototype.replace(), menggunakan String.prototype.replace() dengan Map, menggunakan fungsi encodeURIComponent() dan fungsi escape(). Kaedah lain yang boleh digunakan ialah innerHTML, replace, document.createElement, dsb.

Atas ialah kandungan terperinci Bagaimana untuk menukar aksara khas kepada HTML dalam Javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 正则表达式 html String 标识符字符串 map prototype innerHTML

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Apakah gegaran pokok dalam JavaScript?Artikel seterusnya：Apakah gegaran pokok dalam JavaScript?

Artikel berkaitan

Lihat lagi