Преобразование HTML в данные: текстовая / HTML-ссылка с использованием JavaScript - PullRequest
Новая
       28

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

25 голосов
/ 11 февраля 2012

Вот мой 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.

1 Ответ

38 голосов
/ 11 февраля 2012

Характеристики данных-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.
  • < и > do не должны быть экранированными внутри атрибута HTML . Однако, если вы собираетесь встроить ссылку в HTML, их также следует экранировать (%3C and %3E)

Реализация JavaScript

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

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

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

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;
...