使用 JavaScript 将 HTML 转换为 data:text/html 链接

Question

这是我的 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 ？

除了在 JavaScript 中之外，我基本上想在这里完成相同的转换（选中 base64 复选框）。

Answer 1

数据URI的特征

MIME类型text/html的数据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>元素/ 样式）。 然后，只替换重要字符：

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;

Answer 2

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

使用 JavaScript 将 HTML 转换为 data:text/html 链接

问题描述

2 个解决方案

解决方案1
40 已采纳 2012-02-11 09:51:42

数据URI的特征

JavaScript实现

解决方案2
0 2021-10-06 02:18:34

使用 JavaScript 将 HTML 转换为 data:text/html 链接

问题描述

2 个解决方案

解决方案1 40 已采纳 2012-02-11 09:51:42

数据URI的特征

JavaScript实现

解决方案2 0 2021-10-06 02:18:34

解决方案1
40 已采纳 2012-02-11 09:51:42

解决方案2
0 2021-10-06 02:18:34