29

这是我的 HTML：

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

如何使用 JavaScript 使href我的链接属性指向来源为innerHTMLof的 base64 编码网页div#html？

除了在 JavaScript 中，我基本上想在此处进行相同的转换（选中 base64 复选框）。

4

2 回答 2

47

数据 URI 的特征

具有 MIME 类型的数据 URItext/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;
于 2012-02-11T09:51:42.660 回答
0

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

于 2021-10-06T02:18:34.693 回答