Преобразование HTML в данные: текстовая / 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 из div#html?

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

Источник

2 ответа

Решение

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

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

Если вы не возражаете против размера data-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;
Источник

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

Источник
Другие вопросы по тегам