Convertir une chaîne en HTML en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Convertir une chaîne en HTML en …
Anika Tabassum Era 12 octobre 2023
JavaScript JavaScript String
  1. Utiliser la propriété innerHTML pour convertir une chaîne en objet HTML
  2. Utilisez l’interface DOMParser() pour convertir une chaîne en objet HTML
  3. Utilisez jQuery pour garantir le type de la chaîne transmise en HTML
Convertir une chaîne en HTML en JavaScript

En JavaScript, certaines conventions spécifiques donnent à l’historique de développement global une longueur d’avance pour être intégré. De même, l’un des moyens non statiques d’adresser une chaîne (sous la forme d’un modèle de don d’élément HTML) et de le transmettre ultérieurement au corps HTML en tant qu’objet unique.

Cela rend l’interface dynamique et peut résoudre de nombreux problèmes qui auraient été difficiles à résoudre autrement.

Les exemples de code dans le contenu suivant montreront comment implémenter cette conversion. Dans un premier temps, nous allons passer la chaîne avec la propriété innerHTML.

Dans l’exemple suivant, nous utiliserons la méthode DOM parse. Cette convention n’est généralement pas encouragée, car elle a des problèmes d’acceptation par de nombreux navigateurs.

Dans la dernière section, nous examinerons si la chaîne que nous avons transmise était un objet HTML ou simplement des chaînes. Plongeons-nous !

Utiliser la propriété innerHTML pour convertir une chaîne en objet HTML

Ici, nous aurons une fonction stringToHTML qui prendra la chaîne brute en paramètre. Après cela, nous allons créer un div, et nous souhaitons y passer la chaîne donnée.

Nous pourrions également le passer au corps HTML à la place, mais pour être propre, nous attendons un élément div.

Ensuite, le div nouvellement créé sera associé à une instance dom (soi-disant). Ainsi, pour dom, nous allons définir la propriété innerHTML puis passer la chaîne.

Le retour sera l’instance dom de la fonction stringToHTML que nous avons créée. Vérifions les lignes de code.

<!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>'));

Production:

Utiliser la propriété innerHTML pour convertir une chaîne en objet HTML

Utilisez l’interface DOMParser() pour convertir une chaîne en objet HTML

Le DOMParser() est souvent ignoré ou peut être utilisé avec des conditions. Si la manière précédente de gérer les problèmes est effacée, ce segment de code peut se déclencher pour sauvegarder le processus.

Donc ici, nous allons prendre une instance de l’interface DOMParser(), et l’instance sera déclenchée par parseFromString(). Les paramètres seront la chaîne et le type en HTML qu’elle est censée représenter.

Nous passerons ensuite l’instance doc au corps HTML.

Extrait de code:

<!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>'));

Production:

Utiliser l&rsquo;interface DOMParser() pour convertir une chaîne en objet HTML

Utilisez jQuery pour garantir le type de la chaîne transmise en HTML

Dans cette section, nous déterminerons la tâche globale. Nous vérifierons si l’objet HTML a été créé, le type, etc.

Si nous pouvons utiliser jQuery pour transmettre une chaîne, elle passe au HTML sous forme d’objet. Bien que le contenu n’ait pas été prévisualisé, il a créé son espace dans le corps HTML (non permanent).

Passons donc au bloc de code.

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

Production:

Utilisez jQuery pour garantir le type de la chaîne transmise en HTML

Auteur: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Article connexe - JavaScript String