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

小编典典

数据URI的特征

甲数据-URI与MIME类型text/html必须是在其中一种格式：

data:text/html,

data:text/html;charset=UTF-8,

不需要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包含

element/style，否则可以安全地做到这一点)。然后，仅替换有效字符：

var html = document.getElementById("html").innerHTML;

html = html.replace(/\s{2,}/g, '') //

.replace(/%/g, '%25') //

.replace(/&/g, '%26') //

.replace(/#/g, '%23') //

.replace(/"/g, '%22') //

.replace(/'/g, '%27'); //

var dataURI = 'data:text/html;charset=UTF-8,' + html;

2020-05-01