Convert HTML to data:text/html link using JavaScript

by

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:

  • # – Firefox and Opera interpret this character as the marker of a hash (as in location.hash).
  • % – This character is used to escape characters. Escape this character to make sure that no side effects occur.

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

  • " and/or ' – Quotes mark the value of the attribute.
  • & – The ampersand is used to mark HTML entities.
  • < and > do not have to be escaped inside a HTML attribute. However, if you’re going to embed the link in the HTML, these should also be escaped (%3C and %3E)

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/style). Then, only replace the significant characters:

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;

More Related Contents:

  1. Is there any way to specify a suggested filename when using data: URI?
  2. Should setting an image src to data URL be available immediately?
  3. How to convert Base64 String to javascript file object like as from file input form?
  4. Pass vars to JavaScript via the SRC attribute
  5. Get Base64 encode file-data from Input Form
  6. How to save a base64 image to user’s disk using JavaScript?
  7. Convert binary data to base64 with javascript
  8. SecurityError: The operation is insecure – window.history.pushState()
  9. play .wav sound file encoded in base64 with javascript
  10. What are the differences between history.pushState & location.hash? [closed]
  11. Get HTML code using JavaScript with a URL
  12. What is the size limit of a Base64 DataURL image?
  13. How to download a base64-encoded image?
  14. how to display base64 encoded pdf?
  15. Remove fragment in URL with JavaScript w/out causing page reload
  16. Javascript-Setting background image of a DIV via a function and function parameter
  17. How can i create html automatic change page? [duplicate]
  18. Changing website favicon dynamically
  19. Detecting input change in jQuery?
  20. Get IFrame’s document, from JavaScript in main document
  21. fetch(), how do you make a non-cached request?
  22. How To Determine Which Submit Button Was Pressed, Form onSubmit Event, Without jQuery [duplicate]
  23. Image manipulation and texture mapping using HTML5 Canvas?
  24. CSS3-Animate elements if visible in viewport (Page Scroll)
  25. “Scroll” to the very right of a long text input
  26. How do I make a move up and down when I’m scrolling the page?
  27. Hide div element when screen size is smaller than a specific size
  28. Firefox Web Console Disabled?
  29. Is it possible to make input fields read-only through CSS?
  30. Freeze Header until Irrelevant (HTML, CSS and JS)

Leave a Comment