将 HTML 转换为数据：使用 JavaScript 的文本/html 链接答案

【问题标题】：Convert HTML to data:text/html link using JavaScript将 HTML 转换为数据：使用 JavaScript 的文本/html 链接
【发布时间】：2012-02-11 08:33:48
【问题描述】：

这是我的 HTML：

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

如何使用 JavaScript 使我的链接的 href 属性指向一个 base64 编码的网页，该网页的来源是 div#html 的 innerHTML？

我基本上想做与 here 相同的转换（选中 base64 复选框），但 JavaScript 除外。

【问题讨论】：

标签： javascript html url base64 data-uri

【解决方案1】：

data-URI 的特征

具有 MIME 类型 text/html 的 data-URI 必须采用以下格式之一：

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> 元素/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;

【讨论】：

感谢您的广泛回答。这真的很有帮助！ :)
注意 Opera 在# 方面的行为与 Firefox 类似。 Chrome 和 Safari 对 # 没有特殊含义。
底部示例中的小错字。如果我没记错的话，data:text/html,charset=UTF-8 应该是data:text/html;charset=UTF-8
@B1KMusic 感谢您提出这个问题。逗号确实必须改为分号，并且需要添加尾随分号。修改后的答案。
encodeURIComponent 会代替您对replace 方法的多次使用吗？

【解决方案2】：

如果大小很重要，您最好去掉所有连续的空白（这可以安全地完成，除非 HTML 包含 <pre> 元素/样式）。然后，只替换重要字符：

【讨论】：