String in JavaScript in HTML umwandeln
-
Verwenden Sie die Eigenschaft
innerHTML, um den String in ein HTML-Objekt zu konvertieren -
Verwendung der Schnittstelle
DOMParser()zur Umwandlung von Strings in HTML-Objekte -
Verwenden Sie
jQuery, um den Typ der in HTML übergebenen Zeichenfolge sicherzustellen
In JavaScript sorgt eine bestimmte Konvention dafür, dass die gesamte Entwicklungsgeschichte einen Schritt voraus ist, um integriert zu werden. Ebenso eine der nicht-statischen Möglichkeiten, einen String (in Form eines HTML-Elementspendemusters) zu adressieren und ihn später als eindeutiges Stück Objekt an den HTML-Körper zu übergeben.
Dies macht die Schnittstelle dynamisch und kann viele Probleme lösen, die sonst schwer zu lösen gewesen wären.
Die Codebeispiele im folgenden Inhalt zeigen, wie diese Konvertierung implementiert wird. Zuerst übergeben wir den String mit der Eigenschaft innerHTML.
Im nächsten Beispiel verwenden wir die Methode DOM parse. Diese Konvention wird meistens nicht empfohlen, da sie bei vielen Browsern Probleme mit der Akzeptanz hat.
Im letzten Abschnitt werden wir untersuchen, ob der übergebene String ein HTML-Objekt oder nur Strings war. Tauchen wir ein!
Verwenden Sie die Eigenschaft innerHTML, um den String in ein HTML-Objekt zu konvertieren
Hier haben wir eine Funktion stringToHTML, die den Rohstring als Parameter nimmt. Danach erstellen wir ein div und möchten die darin angegebene Zeichenfolge übergeben.
Wir könnten es stattdessen auch an den HTML-Body übergeben, aber der Einfachheit halber erwarten wir ein div-Element.
Als nächstes wird das neu erstellte div (angeblich) mit einer Instanz dom verknüpft. Für dom setzen wir also die Eigenschaft innerHTML und übergeben dann den String.
Das return ist die dom-Instanz für die von uns erstellte Funktion stringToHTML. Lassen Sie uns die Codezeilen überprüfen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="abc.js"></script>
</body>
</html>
var stringToHTML = function(str) {
var dom = document.createElement('div');
dom.innerHTML = str;
return dom;
};
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
Ausgabe:
Verwendung der Schnittstelle DOMParser() zur Umwandlung von Strings in HTML-Objekte
Der DOMParser() wird oft ignoriert oder kann zusammen mit Bedingungen verwendet werden. Wenn die vorherige Art der Behandlung der Probleme ausgelöscht wird, wird dieses Codesegment möglicherweise ausgelöst, um den Prozess zu sichern.
Hier nehmen wir also eine Instanz der DOMParser()-Schnittstelle, und die Instanz wird durch parseFromString() ausgelöst. Die Parameter sind die Zeichenfolge und der Typ in HTML, den sie darstellen soll.
Wir übergeben dann die Instanz doc an den HTML-Body.
Code-Auszug:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="2.js"></script>
</body>
</html>
var stringToHTML = function(str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
console.log(
stringToHTML('<h1>Hello world!</h1><p>I am fine Thank you! ^_^</p>'));
Ausgabe:
-Interface-to-Convert-String-to-HTML-Object.webp)
Verwenden Sie jQuery, um den Typ der in HTML übergebenen Zeichenfolge sicherzustellen
In diesem Abschnitt legen wir die Gesamtaufgabe fest. Wir werden überprüfen, ob das HTML-Objekt erstellt wurde, den Typ usw.
Wenn wir jQuery verwenden können, um einen String zu übergeben, geht er in einer Objektform an HTML. Obwohl der Inhalt nicht in der Vorschau angezeigt wurde, hat er seinen Platz im HTML-Text erstellt (nicht dauerhaft).
Springen wir also zum Codeblock.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="3.js"></script>
<script>
var stringToHTML = function (str) {
var d = $(str);
return d;
}
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
</script>
</body>
</html>
Ausgabe:
