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

IT技术 javascript html url base64 data-uri
2021-02-08 19:14:10

这是我的 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 复选框）。

2个回答

数据 URI 的特征

甲数据-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 实体。
  • <并且>也没有进行转义一个HTML属性中。但是，如果您要在 HTML 中嵌入链接，这些也应该被转义 ( %3C and %3E)

JavaScript 实现

如果您不介意数据 URI 的大小，最简单的方法是使用encodeURIComponent：

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

如果大小很重要，您最好去掉所有连续的空格（这可以安全地完成，除非 HTML 包含<pre>element/ 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;
encodeURIComponent会代替您对该replace方法的多次使用吗？
2021-03-14 19:14:10
注意 Opera 的行为与 Firefox 类似#。Chrome 和 Safari 没有赋予#.
2021-03-19 19:14:10
底部示例中的小错字。如果我没记错的话data:text/html,charset=UTF-8应该是data:text/html;charset=UTF-8
2021-03-19 19:14:10
@B1KMusic 感谢您提出这个问题。逗号确实必须更改为分号，并且需要添加尾随分号。修订的答案。
2021-03-24 19:14:10
感谢您的广泛回答。这真的很有帮助！:)
2021-04-08 19:14:10

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

其它你可能感兴趣的问题
上一篇输入视频文件时获取视频时长 下一篇window.onbeforeunload 不适用于 iPad？