☰ dataURI

Les data-URI

Characteristics of a data-URI

A data-URI with MIME-type text/html has to be in one of these formats:

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

Base-64 encoding is not necessary. If your code contains non-ASCII characters, such as é, charset=UTF-8 has to be added.

The following characters have to be escaped:

Additionally, if you want to embed the code in an anchor tag, the following characters should also be escaped:

JavaScript implementation

If you don't mind the size of the data-URI, the easiest method to do so is using encodeURIComponent:

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

If size matters, you'd better strip out all consecutive white-space (this can safely be done, unless the HTML contains a <pre> element)

var html = document.getElementById("html").innerHTML;
html = html.replace(/\s{2,}/g, '')   // <-- Replace all consecutive spaces
	.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;