0

JavaScript で HTML を圧縮し、Ruby で解凍しようとしています。ただし、一部の文字が正しく処理されていないため、これを修正する方法を探しています。

私の圧縮関数は、最初にこの関数を使用して html をバイト配列に変換します。次に、 js-deflate ライブラリを使用して配列を圧縮します。最後に、そこからの出力は、window.btoa()を使用して base64 でエンコードされます。

var compress = function(htmlString) {
  var compressed, originalBytes;

  originalBytes = Utils.stringToByteArray(htmlString);
  compressed = RawDeflate.deflate(originalBytes.join(''));
  return window.btoa(compressed);
};

Rubyの終わりにDecompressionは、圧縮されたhtmlを最初にbase64でデコードするクラスがあります。次に、RubyZlib標準ライブラリを使用して html を解凍します。このプロセスは、このスタック オーバーフローの質問スレッドで説明されています。

require "base64"
require "zlib"

class Decompression
  def self.decompress(string)
    decoded = Base64.decode64(string)
    inflate(decoded)
  end

private

  def self.inflate(string)
    zstream = Zlib::Inflate.new(-Zlib::MAX_WBITS)
    buf = zstream.inflate(string)
    zstream.finish
    zstream.close
    buf
  end
end

このクラスを使用して、ローカル サーバーに送信された圧縮された html を膨張させ、ファイルに書き込みます。

decompressed_content = Decompression.decompress(params["compressed_content"])
File.write('decompressed.html', decompressed_content)

次に、ブラウザでファイルを開いて、正しいかどうかを確認します。

ほとんどの場合、これで問題なく動作します。Stack Overflow のホームページを処理すると、次のようになります。

処理された Stack Overflow ホームページ

ただし、いくつかの問題があることがわかります。一部の文字が正しく出力されません。最も顕著なのは、ヘッダーの自分の名前の横にある下向き矢印です。

下矢印

最近のタグリストの乗算記号

最近のタグ一覧

ページのこれらの部分が適切に処理されるようにコードを修正するにはどうすればよいですか?

膨張したhtmlのエンコーディングを強制しようとしましたUTF-8が、何も変わりません。

  def self.decompress(string)
    decoded = Base64.decode64(string)
    # Forcing the encoding of the output doesn't do anything.
    inflate(decoded).force_encoding('UTF-8')
  end

  def self.decompress(string)
    decoded = Base64.decode64(string)
    # Either does forcing the encoding of the inflate input.
    inflate(decoded.force_encoding('UTF-8'))
  end

ASCII-8BIT重要な点の 1 つは、文字列のエンコーディングが Base64 でデコードされた後に変更されるように見えることです。

def self.decompress(string)
  p "Before decode: #{string.encoding}"
  decoded = Base64.decode64(string)
  p "After decode: #{decoded.encoding}"
  inflated = inflate(decoded)
  p "After inflate: #{inflated.encoding}"
  inflated
end

# Before decode: UTF-8
# After decode: ASCII-8BIT
# After inflate: ASCII-8BIT

編集

最初に html を取得するために使用する方法を尋ねられました。jQuery を使用して、ページから単純に引き出します。

$('html')[0].outerHTML

Content-Type膨張したhtmlにメタタグを追加した効果を表示するように編集します

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />膨らんだhtmlに追加しました。そして、次のような疑問符ボックスが表示されるようになりました（ちなみにChromeブラウザ）：

疑問符ボックス.

膨らませた html のソースを調べて、実際の Stack Overflow html のソースと比較すると、自分の名前の横にある逆三角形に別の文字が使用されていることがわかります。

実際の SO ソース: <span class="profile-triangle">&#9662;</span>
メタ Content-Type を含まない膨張ソース: メタ Content-Type <span class="profile-triangle">¾</span>
を含む膨張ソース: <span class="profile-triangle">�&lt;/span>

4

3 に答える 3

2

取得したHTMLにUTF8エンコーディングを追加してみてください。のように

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" />

ソースコード（この同じページのctrl + u）で実際に表示できないため、これをお勧めします。

編集：文字セットが欠落していることが判明しました！

于 2012-10-23T14:49:58.503 に答える
2

通常、HTML のコンテンツ タイプは、HTTP ヘッダーと HTML コード自体の両方によって決定されます。HTML コードのみを送信すると、HTTP ヘッダー情報が失われます。

StackOverflow によって送信された HTTP ヘッダーを見てください。

Cache-Control:public, max-age=60
Content-Encoding:gzip
Content-Length:33200
Content-Type:text/html; charset=utf-8
Date:Tue, 23 Oct 2012 17:35:02 GMT
Expires:Tue, 23 Oct 2012 17:36:02 GMT
Last-Modified:Tue, 23 Oct 2012 17:35:02 GMT
Vary:*

ご覧のとおり、Content-type は として指定されていutf-8ます。ファイルを作成する場合、@alexandernst が示唆するように、HEAD の HTML タグを使用して content-type を手動で設定する必要があります。

于 2012-10-23T17:37:24.763 に答える
0

alexandernstは正しい方向に進んでいましたが、HTML 出力に実際に追加する必要があったのは、メタ文字セット タグでした。

<meta charset="UTF-8">

それを Stack Overflow ホームページの HTML 出力に入れると、完璧に見えます。

于 2012-10-24T12:21:15.080 に答える