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

小编典典

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

javascript

这是我的HTML：

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

如何使用JavaScript来使href我的链接点的属性base64编码的网页，其来源是innerHTML的div#html？

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

阅读 802

2020-05-01

共1个答案

小编典典

数据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实现

如果您不介意data-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;

2020-05-01