web-dev-qa-db-ja.com

JavaScriptを使用してHTMLをdata：text / htmlリンクに変換します

これが私のHTMLです。

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

JavaScriptを使用して、リンクのhref属性が、innerHTMLのソースがdiv#html？

私は基本的に、JavaScriptを除き、同じ変換を行います here （base64チェックボックスをオンにして）。

javascripthtmlurlbase64data-uri
25
Web_Designer

データURIの特性

data-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エンティティをマークするために使用されます。
  • <および> do 必要ないエスケープ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(/\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;
40
Rob W