web-dev-qa-db-fra.com

Convertir HTML en données: lien texte / html en utilisant JavaScript

Voici mon HTML:

<a>View it in your browser</a>
<div id="html">
    <h1>Doggies</h1>
    <p style="color:blue;">Kitties</p>
</div>

Comment utiliser JavaScript pour que l'attribut href de mon lien pointe vers une page Web encodée en base64 dont la source est le innerHTML de div#html?

Je veux essentiellement faire la même conversion ici (avec la case à cocher base64 cochée) sauf en JavaScript.

javascripthtmlurlbase64data-uri
25
Web_Designer

Caractéristiques d'un URI de données

A data-URI avec le type MIME text/html doit être dans l'un de ces formats:

data:text/html,<HTML HERE>
data:text/html;charset=UTF-8,<HTML HERE>

L'encodage Base-64 n'est pas nécessaire. Si votre code contient des caractères non ASCII, tels que éé, charset=UTF-8 doit être ajouté.

Les caractères suivants doivent être échappés:

  • # - Firefox et Opera interprètent ce caractère comme le marqueur d'un hachage (comme dans location.hash).
  • % - Ce caractère est utilisé pour échapper les caractères. Échappez à ce personnage pour vous assurer qu'aucun effet secondaire ne se produit.

En outre, si vous souhaitez incorporer le code dans une balise d'ancrage, les caractères suivants doivent également être échappés:

  • " and/or ' - Les guillemets marquent la valeur de l'attribut.
  • & - L'esperluette est utilisée pour marquer les entités HTML.
  • < et > ne pas besoin d'être échappé à l'intérieur d'un attribut HTML . Cependant, si vous allez intégrer le lien dans le code HTML, vous devez également les échapper (%3C and %3E)

Implémentation JavaScript

Si la taille de l'URI de données ne vous dérange pas, la méthode la plus simple consiste à utiliser encodeURIComponent :

var html = document.getElementById("html").innerHTML;
var dataURI = 'data:text/html,' + encodeURIComponent(html);

Si la taille est importante, vous feriez mieux de supprimer tous les espaces blancs consécutifs (cela peut être fait en toute sécurité, sauf si le HTML contient un <pre> élément/ style ). Ensuite, ne remplacez que les caractères significatifs:

var html = document.getElementById("html").innerHTML;
html = html.replace(/\s{2,}/g, '')   // <-- Replace all consecutive spaces, 2+
           .replace(/%/g, '%25')     // <-- Escape %
           .replace(/&/g, '%26')     // <-- Escape &
           .replace(/#/g, '%23')     // <-- Escape #
           .replace(/"/g, '%22')     // <-- Escape "
           .replace(/'/g, '%27');    // <-- Escape ' (to be 100% safe)
var dataURI = 'data:text/html;charset=UTF-8,' + html;
40
Rob W