使用 JavaScript 将 HTML 转换为 data:text/html 链接 [英] Convert HTML to data:text/html link using JavaScript
问题描述
这是我的 HTML:
在浏览器中查看<div id="html"><h1>小狗</h1><p style="color:blue;">小猫</p>如何使用 JavaScript 使我的链接的 href 属性指向 base64 编码的网页，其来源是 div#html 的 innerHTML代码>?
我基本上想在这里(使用base64复选框已选中)，JavaScript 除外.
data-URI 的特征
具有 MIME 类型 text/html 的 data-URI必须采用以下格式之一:
data:text/html,data:text/html;charset=UTF-8,Base-64 编码不是必需的.如果您的代码包含非 ASCII 字符，例如 éé，则必须添加 charset=UTF-8.
必须对以下字符进行转义:
#- Firefox 和 Opera 将此字符解释为散列的标记(如location.hash).%- 此字符用于转义字符.转义此字符以确保不会发生副作用.
另外，如果你想将代码嵌入到锚标签中，以下字符也应该被转义:
- <代码>"和/或 ' - 引号标记属性的值.
&- 与号用于标记 HTML 实体.<和>不必被转义在 HTML 属性中.但是，如果您要在 HTML 中嵌入链接，这些链接也应该被转义(%3C 和 %3E)
JavaScript 实现
如果您不介意数据 URI 的大小，最简单的方法是使用 encodeURIComponent:
var html = document.getElementById("html").innerHTML;var dataURI = 'data:text/html,' + encodeURIComponent(html);如果大小很重要，您最好去掉所有连续的空格(这可以安全地完成，除非 HTML 包含 <pre> 元素/style).然后，只替换重要字符:
var html = document.getElementById("html").innerHTML;html = html.replace(/s{2,}/g, '')//<-- 替换所有连续空格，2+.replace(/%/g, '%25')//<-- 转义 %.replace(/&/g, '%26')//<-- 转义 &.replace(/#/g, '%23')//<-- 转义 #.replace(/"/g, '%22')//<-- 转义 ".replace(/'/g, '%27');//<-- Escape '(为了 100% 安全)var dataURI = 'data:text/html;charset=UTF-8,' + html;Here's my HTML:
<a>View it in your browser</a>
<div id="html">
<h1>Doggies</h1>
<p style="color:blue;">Kitties</p>
</div>
How do I use JavaScript to make the href attribute of my link point to a base64 encoded webpage whose source is the innerHTML of div#html?
I basically want to do the same conversion done here (with the base64 checkbox checked) except for in JavaScript.
Characteristics of a data-URI
A data-URI with MIME-type text/html has to be in one of these formats:
data:text/html,<HTML HERE>
data:text/html;charset=UTF-8,<HTML HERE>
Base-64 encoding is not necessary. If your code contains non-ASCII characters, such as éé, charset=UTF-8 has to be added.
The following characters have to be escaped:
#- Firefox and Opera interpret this character as the marker of a hash (as inlocation.hash).%- This character is used to escape characters. Escape this character to make sure that no side effects occur.
Additionally, if you want to embed the code in an anchor tag, the following characters should also be escaped:
" and/or '- Quotes mark the value of the attribute.&- The ampersand is used to mark HTML entities.<and>do not have to be escaped inside a HTML attribute. However, if you're going to embed the link in the HTML, these should also be escaped (%3C and %3E)
JavaScript implementation
If you don't mind the size of the data-URI, the easiest method to do so is using encodeURIComponent:
var html = document.getElementById("html").innerHTML;
var dataURI = 'data:text/html,' + encodeURIComponent(html);
If size matters, you'd better strip out all consecutive white-space (this can safely be done, unless the HTML contains a <pre> element/style). Then, only replace the significant characters:
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;
这篇关于使用 JavaScript 将 HTML 转换为 data:text/html 链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
