Web*_*ner 25 html javascript url base64 data-uri
这是我的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？
我基本上想要在这里完成相同的转换(选中base64复选框),但在JavaScript中除外.
Rob*_*b W 40
甲数据-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)如果您不介意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;