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

Question

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

33

这是我的HTML：

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

如何使用JavaScript使我的链接的href属性指向一个以div#html的innerHTML为源的base64编码网页?

我基本上想要做与这里相同的转换（选中了base64复选框），只不过是在JavaScript中。

- Web_Designer

2个回答

0

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

- Ernest

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

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）。
% - 此字符用于转义字符。转义此字符确保不会发生任何副作用。

此外，如果您想在锚标签中嵌入代码，则还应转义以下字符：

"和/或' - 引号标记属性值。
& - 号用于标记HTML实体。
在HTML属性内部，<和>不需要转义。但是，如果您要在HTML中嵌入链接，这些也应该被转义（%3C和%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;