javascript - pgltzybzcmm9imh0dhbzoi8vaxr1bmvzlmfwcgxllmnvbs9myxzpy29ulmljbyi - data:image/jpeg;base64
Convierte HTML a datos: enlace de texto/html usando JavaScript (1)
Aquí está mi HTML:
<a>View it in your browser</a>
<div id="html">
<h1>Doggies</h1>
<p style="color:blue;">Kitties</p>
</div>
¿Cómo uso JavaScript para hacer que el atributo href de mi enlace apunte a una página web codificada en base64 cuya fuente es el innerHTML de div#html ?
Básicamente, quiero hacer la misma conversión here (con la casilla base64 marcada), excepto en JavaScript.
Características de un URI de datos
Un data-URI con text/html tipo MIME tiene que estar en uno de estos formatos:
data:text/html,<HTML HERE>
data:text/html;charset=UTF-8,<HTML HERE>
La codificación de Base-64 no es necesaria. Si su código contiene caracteres que no son ASCII, como éé , debe éé charset=UTF-8 .
Los siguientes personajes deben ser escapados:
-
#- Firefox y Opera interpretan este carácter como el marcador de un hash (como enlocation.hash). -
%- Este caracter se usa para escapar de personajes. Escape de este personaje para asegurarse de que no se produzcan efectos secundarios.
Además, si desea incrustar el código en una etiqueta delimitadora, también se deben escapar los siguientes caracteres:
-
" and/or '': las comillas marcan el valor del atributo. -
&- El signo&se usa para marcar entidades HTML. -
<y>no tienen que escaparse dentro de un atributo HTML . Sin embargo, si va a incrustar el enlace en el HTML, también se deben escapar (%3C and %3E)
Implementación de JavaScript
Si no te importa el tamaño del URI de datos, el método más fácil para hacerlo es usar encodeURIComponent :
var html = document.getElementById("html").innerHTML;
var dataURI = ''data:text/html,'' + encodeURIComponent(html);
Si el tamaño importa, será mejor que elimines todos los espacios en blanco consecutivos (esto se puede hacer de manera segura, a menos que el HTML contenga un elemento / style <pre> ). Luego, solo reemplaza los personajes significativos:
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;