압축 및 스택 오버플로 홈페이지 압축 해제 HTML

Question

JavaScript로 HTML을 압축하고 Ruby로 압축을 푸는 중입니다. 일부 캐러커는 올바르게 처리되지 않고 있으며이를 해결할 방법을 찾고 있습니다.

내 압축 함수는 먼저 this function을 사용하여 html을 바이트 배열로 변환합니다. 그런 다음 js-deflate library을 사용하여 배열을 압축합니다. 마지막으로 그 출력은 window.btoa()을 사용하여 base64로 인코딩됩니다. 사물의 루비 말에

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

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

내가 먼저 base64로 압축 된 HTML을 디코딩하는 Decompression 클래스가 있습니다. 그런 다음 Ruby Zlib 표준 라이브러리를 사용하여 html을 압축 해제합니다. 이 프로세스는 this Stack Overflow question thread에 설명되어 있습니다.

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) 

그런 다음 파일을 브라우저에서 열어 올바른지 확인합니다.

대부분 작동합니다. 나는 스택 오버플로 홈페이지를 처리 ​​할 수 ​​있으며 다음과 같이 나온다 :하지만 몇 가지 문제가있다

당신은 볼 수 있습니다. 일부 문자가 나는

어떻게 헤더

및 최근 태그 목록에서 곱셈 기호에 내 이름 옆에 올바르게 특히 아래쪽 화살표를 할 수 있습니다 나오고 있지 않습니다 페이지의 이러한 부분이 올바르게 처리되도록 코드를 수정하십시오.

나는 inflated html의 인코딩을 UTF-8으로 강제로 시도했지만 아무 것도 변경하지 않았습니다.

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 

을 편집

누군가가 내가 얻기 위해 사용하는 방법에 대한 질문 :

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 

하나의 키는 문자열의 인코딩은 Base64로 디코딩 후 ASCII-8BIT로 변경하는 것이다 처음에는 html. 나는 단순히 jQuery를 사용하여 페이지를 해내 :

$('html')[0].outerHTML 

편집 내가 팽창 HTML로 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />을 추가 팽창 된 HTML

에 Content-Type 메타 태그를 추가하는 효과를 표시합니다.

: 그리고 이제이 (그런데 크롬 브라우저)와 같은 물음표 상자를 얻을.

내가 부 풀린 HTML 소스를 검사하여 실제 스택 오버플로 HTML 소스와 비교하면 내 이름 옆에 거꾸로 된 삼각형에 다른 문자가 사용 된 것을 볼 수 있습니다.

실제 SO 출처 :<span class="profile-triangle">&#9662;</span>
메타의 Content-Type없이 비정상적 출처 :<span class="profile-triangle">¾</span>
메타의 Content-Type과 비정상적 출처 :<span class="profile-triangle">�</span>

Answer 1

당신이 얻을 HTML에 UTF8 인코딩을 추가하는 시도 . 실제로 (이 같은 페이지에서 Ctrl + U) 소스 코드를 볼 수 없기 때문에

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

에 나는이 제안처럼.

편집 : 당신이 캐릭터 세트 누락 된 밝혀!

Answer 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:* 

, 컨텐츠 형이 utf-8 인 것으로 지정됩니다. 파일을 만드는 경우 @alexandernst에서 제시하는 것처럼 HEAD의 HTML 태그를 사용하여 수동으로 컨텐트 유형을 설정해야합니다.

Answer 3

alexandernst는 바른 길에했지만 제가 실제로 HTML 출력에 추가하기 위해 필요한 것은 메타 charset 태그이었다 내가 넣어되면

<meta charset="UTF-8"> 

은 스택 오버플로 홈페이지의 HTML 출력으로 완벽 보이는 것을 .