Créer une page HTML en JavaScript

Le problème exposé dans ce sujet a été résolu.

Bonjour !

Je cherche à créer une page web en JavaScript à partir d’une chaîne de caractère en HTML :

let htmlString = "<!DOCTYPE html><html><head><title>Mon titre</title></head><body><p id='hey'>Hello!</p></body></html>";

let monDocument = createDocument();

monDocument.innerHTML = htmlString;
let p = monDocument.getElementById('hey');

console.log(p.textContent);

Là où je coince, c’est la fonction createDocument();.
J’ai cherché quelques solutions, sans en trouver une qui soit stable et standardisée.

Par exemple, utiliser le constructeur n’est pas standard comme indiqué avec l’icône d’attention.
L’objet implémentation est en lecture seule.

J’ai étudié le JS il y a quelques années, je ne suis pas bien au courant des dernières nouveautés standardisées. Auriez-vous des idées pour la fonction createDocument() ?

PS : Le contexte où je dois implémenter une telle fonction est volontairement simplifié ici, d’où l’apparente absurdité du code. Mais si j’arrive à le faire fonctionner, ça m’aidera pour mon projet derrière.

+0 -0

Bonjour,

Cette fonction createDocument me rappelle beaucoup trop la fonction document.write … une horreur.

J’aurais plutôt choisi d’ajouter une iframe avec un URI en base64 (ce qui permet une bien meilleure isolation du code) :

function addPage (html) {
  var doc = document.createElement('iframe');
  doc.src = `data:text/html;base64,${btoa(html)}`; // ici le plus important
  doc.style.position = 'fixed';
  doc.style.top = '0px';
  doc.style.left = '0px';
  doc.style.width ='300px';
  doc.style.height ='300px';
  doc.style.zIndex = 1000;
  doc.style.backgroundColor = '#FFF';
  document.querySelector('body').appendChild(doc);
}

addPage("<!DOCTYPE html><html><head><title>Mon titre</title></head><body><p id=\"hey\">Hello!</p></body></html>");

Tu peux exécuter directement le code sur Zds à partir de ta console (F12).

+0 -0

Salut, en fait je n’ai pas besoin d’afficher le document.

Dans mon projet, on envoie une requête vers une page dont on récupère le code source HTML dans une chaîne de caractère. L’idée, c’est de parser ce code HTML pour détecter la valeur de l’élément ayant pour id hey.

Par conséquent, l’astuce de l’iframe ne fonctionne pas si je l’adapte à mon besoin :

Uncaught TypeError: document.querySelector(...) is null

Le code :

function getIdText(html) {
    let doc = document.createElement('iframe');
    doc.src = `data:text/html;base64,${btoa(html)}`; // ici le plus important

    /* Pas besoin de style */

    return doc.querySelector('#hey').textContent;
}

console.log(getIdText("<!DOCTYPE html><html><head><title>Mon titre</title></head><body><p id=\"hey\">Hello!</p></body></html>"));
+0 -0

Ce dont tu as besoin c’est d’un DOM virtuel en fait.

Par exemple jsdom te permettra de faire ce que tu veux.

ache

Merci, mais je préfère éviter de dépendre de ressources externes, si possible :)

Hello, quel est le problème de DOMParser ?

dvbmgr

Aucun problème, en fait, je ne connaissais pas son existence et ça résout mon problème :)

Le code qui fonctionne :

function getIdText(html) {
    let doc = (new DOMParser()).parseFromString(html, "text/html");
    return doc.querySelector('#hey').textContent;
}

console.log(getIdText("<!DOCTYPE html><html><head><title>Mon titre</title></head><body><p id=\"hey\">Hello!</p></body></html>"));
+0 -0

Merci, mais je préfère éviter de dépendre de ressources externes, si possible

Je comprend tout à fait. DOMParser crée un DOM virtuel et en plus est dans déjà dans Web API. Autant en profiter.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte