Heim > Artikel > Web-Frontend > Wie konvertiere ich Sonderzeichen in Javascript in HTML?

Wie konvertiere ich Sonderzeichen in Javascript in HTML?

PHPznach vorne: 2023-09-03 17:41:02675Durchsuche

Wir können die Methode replace() verwenden, um Sonderzeichen in JavaScript in HTML zu konvertieren. Diese Methode kann auch auf Karten angewendet werden. Es gibt viele andere Methoden für diese Aufgabe. Wir werden diese Methoden in diesem Artikel ausführlich besprechen. Wir besprechen zunächst die Notwendigkeit der Konvertierung von Sonderzeichen in HTML und anschließend die Methoden zur Konvertierung von Sonderzeichen. Lassen Sie uns zunächst über einige Charakterkonzepte sprechen und dann unser nächstes Thema ansprechen.

Sonderzeichen müssen in HTML konvertiert werden

Wir haben gesehen, wie unsere Entwickler Tausende von Codezeilen geschrieben haben, um bestimmte Aufgaben zu erfüllen. Nehmen wir nun an, wir müssen das Kleiner-als-Symbol () auf einer Webseite oder einer mobilen Anwendung verwenden, die HTML als Skriptsprache verwendet. Nun, das wird zum Problem, weil das Kleiner-als-Symbol () für die Skriptsprache HTML eine besondere Bedeutung hat.

Diese Flags werden normalerweise zum Initialisieren von Tags in HTML verwendet. Ebenso kann die Verwendung des Sonderzeichens in einem Attributwert zu einer Fehlinterpretation des Attributs führen. Um dieses Problem zu lösen, haben wir spezielle Codes für jedes Sonderzeichen, das bei der Verwendung von HTML auftritt. Um Sonderzeichen in HTML einzufügen, beginnen Sie mit einem kaufmännischen Und (&), dann einem Nummernzeichen (#), dann der Codenummer und enden Sie mit einem Semikolon (;). Das (Copyright-)Symbol kann beispielsweise durch © dargestellt werden.

So konvertieren Sie Sonderzeichen in HTML

Es gibt viele Möglichkeiten, Sonderzeichen in HTML umzuwandeln. Einige der gebräuchlichsten Methoden sind unten aufgeführt.

Verwenden Sie die String.prototype.replace()-Methode

Die Methode String.prototype.replace() in JavaScript wird verwendet, um Sonderzeichen durch einen anderen Wert in einer Zeichenfolge zu ersetzen.

String.prototype.replace() hat zwei Parameter, der erste Parameter ist der zu ersetzende Wert und der zweite Parameter ist der zu ersetzende Wert in der Zeichenfolge.

Diese Methode gibt eine neue Zeichenfolge zurück, in der alle Suchwerte durch die erforderlichen Werte in der Zeichenfolge ersetzt werden. Die Methode String.prototype.replace() ändert jedoch nicht den Wert einer vorhandenen Zeichenfolge. Schauen wir uns ein Beispiel an.

Beispiel

<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>

Verwenden Sie String.prototype.replace() mit Map

Die Methode

String.prototype.replace() kann auch mit Maps in JavaScript verwendet werden. Hier hat String.prototype.replace() auch zwei Parameter. Der erste Parameter ist das zu ersetzende reguläre Ausdrucksmuster und der zweite Parameter ist der passende Teilstring.

Beispiel

Sehen wir uns ein Beispiel für die Verwendung von Map mit string.prototype.replace() an -

<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>

Verwenden Sie die Funktion encodeURIComponent()

Wir können auch die Funktion encodeURIComponent() in Javascript verwenden, um Sonderzeichen durch einen anderen Wert in der Zeichenfolge zu ersetzen. Wir verwenden diese Funktion normalerweise zum Codieren von URI-Komponenten (Uniform Resource Identifier). Es ersetzt bestimmte Zeichen in einer Zeichenfolge durch ihre maskierten Gegenstücke, um sicherzustellen, dass die Zeichenfolge für die Verwendung in URIs sicher ist.

Um diese Funktion zu verwenden, müssen wir nur noch einen String (str) als Parameter in der Funktion übergeben. Diese Methode gibt außerdem eine neue Zeichenfolge zurück, in der alle Suchwerte durch die gewünschten Werte in der Zeichenfolge ersetzt werden. Wie die Methode String.prototype.replace() ändert diese Funktion nicht den Wert einer vorhandenen Zeichenfolge. Schauen wir uns ein Beispiel an.

Beispiel

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

Bei der Verwendung dieser Funktion sollten Sie bedenken, dass sie nur mit wenigen Sonderzeichen funktioniert. Um einige andere Sonderzeichen zu verarbeiten, müssen Sie mehrere Methoden oder zusätzliche Logik verwenden, um sie zu verarbeiten.

Verwenden Sie die Funktion escape()

Die Funktion

escape() wird wie die Funktion encodeURIComponent() dazu verwendet, einen String so zu kodieren, dass er keine Probleme mit der URL der Website verursacht. Um diese Funktion zu verwenden, übergeben wir einfach einen String (str) als Parameter an die Funktion. Diese Methode gibt außerdem eine neue Zeichenfolge zurück, in der alle Suchwerte durch die gewünschten Werte in der Zeichenfolge ersetzt werden.

Beispiel

Dies ist ein Beispiel für die Escape()-Funktion -

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

Fazit

In diesem Blog stellen wir zunächst Sonderzeichen, die Notwendigkeit ihrer Konvertierung und die verschiedenen Methoden vor, die Sie dafür verwenden können. Einige der hier besprochenen Methoden verwenden String.prototype.replace(), String.prototype.replace() mit Map, die Funktionen encodeURIComponent() und escape(). Andere Methoden, die verwendet werden können, sind innerHTML, replace, document.createElement usw.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich Sonderzeichen in Javascript in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was ist Tree Shaking in JavaScript?Nächster Artikel：Was ist Tree Shaking in JavaScript?

In Verbindung stehende Artikel

Mehr sehen