将 HTML 转换为数据：使用 JavaScript 的文本/html 链接
Posted
技术标签:
【中文标题】将 HTML 转换为数据：使用 JavaScript 的文本/html 链接【英文标题】：Convert HTML to data:text/html link using JavaScript 【发布时间】：2012-02-11 08:33:48 【问题描述】：这是我的 html：
<a>View it in your browser</a>
<div id="html">
<h1>Doggies</h1>
<p style="color:blue;">Kitties</p>
</div>
如何使用 javascript 使我的链接的 href 属性指向一个 base64 编码的网页，该网页的来源是 div#html 的 innerHTML？
我基本上想做与 here 相同的转换（选中 base64 复选框），但 JavaScript 除外。
【问题讨论】：
【参考方案1】：data-URI 的特征
具有 MIME 类型 text/html 的 data-URI 必须采用以下格式之一：
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> 元素/style）。然后，只替换重要字符：
var html = document.getElementById("html").innerHTML;
html = html.replace(/\s2,/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;
【讨论】：
感谢您的广泛回答。这真的很有帮助！ :) 注意 Opera 在# 方面的行为与 Firefox 类似。 Chrome 和 Safari 对 # 没有特殊含义。
底部示例中的小错字。如果我没记错的话，data:text/html,charset=UTF-8 应该是data:text/html;charset=UTF-8
@B1KMusic 感谢您提出这个问题。逗号确实必须改为分号，并且需要添加尾随分号。修改后的答案。
encodeURIComponent 会代替您对replace 方法的多次使用吗？【参考方案2】：
如果大小很重要，您最好去掉所有连续的空白（这可以安全地完成，除非 HTML 包含 <pre> 元素/样式）。然后，只替换重要字符：
【讨论】：
以上是关于将 HTML 转换为数据：使用 JavaScript 的文本/html 链接的主要内容，如果未能解决你的问题，请参考以下文章