Преобразование HTML в данные: text/html ссылка с использованием JavaScript

Здесь мой HTML:

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

Как использовать JavaScript, чтобы атрибут href моей ссылки указывал на веб-страницу с кодировкой base64, источником которой является innerHTML of div#html?

В основном я хочу сделать то же самое преобразование здесь (с установленным флажком base64), за исключением JavaScript.

Ответы

Ответ 1

Характеристики URI данных

A data-URI с типом MIME text/html должен находиться в одном из следующих форматов:

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

Кодирование Base-64 не требуется. Если ваш код содержит символы, отличные от ASCII, такие как éé, charset=UTF-8 должны быть добавлены.

Следующие символы должны быть экранированы:

  • # - Firefox и Opera интерпретируют этот символ как маркер хэша (как в location.hash).
  • % - Этот символ используется для удаления символов. Удалите этот символ, чтобы убедиться, что никаких побочных эффектов не происходит.

Кроме того, если вы хотите вставить код в тег привязки, следует также экранировать следующие символы:

  • " and/or ' - Котировки отмечают значение атрибута.
  • & - Амперсанд используется для обозначения объектов HTML.
  • < и > сделать не нужно избегать внутри атрибута HTML. Однако, если вы собираетесь внедрить ссылку в HTML, они также должны быть экранированы (%3C and %3E)

реализация JavaScript

Если вы не возражаете против размера URI данных, самый простой способ сделать это - использовать encodeURIComponent:

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

Если размер имеет значение, вам лучше удалить все подряд пробелы (это можно сделать безопасно, если HTML не содержит элемент <pre>/стиль). Затем замените только значимые символы:

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;