HTML5 和神秘字符集

Question

这是我在 SO 的第一篇文章，所以要温柔。

我目前正在开发一个利用新 HTML5 target.result 的网络应用程序。这使我无需将任何内容上传到服务器即可读取文本文件的内容。

我遇到的问题是关于字符集的。因此，通常 Web 内容是通过页面本身生成的，作为博客文章、评论或任何符合该页面字符集和数据库配置的内容。然而，这个新的 HTML5 功能允许我们在不知道相关文档的原始字符集或格式的情况下获取文本文件内容。

在 ajax 发布数据之前对其进行编码是有意义的，因此我尝试了许多不同的方法将文本转换为 utf-8 以及通过各种数据类型。我已经走过了整个图表集之路，htaccess，meta，content-type。

毫不奇怪，这么多人发现使用不同字符集、ASCII、不同语言和 ajax 数据类型对 URI 进行编码、解码的整个过程如此痛苦。

我认为社区可以从一种解决方案中受益，该解决方案可以从任何类型的文本文档中获取文本，无论字符集或格式如何，采用任何语言，并通过 ajax 请求响应以其原始形式显示它，并具有额外的 utf- 8.没有任何人看不懂的奇怪符号，最终终结了那些菱形问号。

这是我现在所处位置的一个示例。

复制这篇新闻文章：News Article

...粘贴到这里：swiss converter tool

无论我使用什么配置，我都无法在底部输出中正确显示撇号，似曾相识吗？

那么谷歌是如何通过谷歌翻译解决这个问题的呢？

编辑： 另外值得注意的是，ABC 新闻和瑞士工具转换器的字符集都是 utf-8。您可以清楚地看到，从 utf-8 转换为 utf-8 也会产生奇怪的符号，即使它们是完全相同的字符集。

EDIST: 2 好的，所以我设法打乱了一个快速原型并将其上传到远程服务器。您可以通过babblingo访问它

这是通过 ajax 发布文本的 javascript：

function handleFileSelect(evt) {

evt.stopPropagation();
evt.preventDefault();

var files = evt.dataTransfer.files;

for (var i = 0, f; f = files[i]; i++) {
    var reader = new FileReader();
    reader.onload = (function(theFile) {
        return function(e) {
            var insertText = e.target.result;
            var fields = 'text=' + insertText;
            $.ajax({
                type: "POST",
                url: "ajax.php?action=addfile",
                data: fields,
                dataType: "json",
                complete: function (data) {
                    if (data.responseJSON.message) {
                        $( "#modal-message h4" ).replaceWith( "<h4 class='modal-title text-center'>"+data.responseJSON.message+"</h4>" );
                    }
                    if (data.responseJSON.report) {
                        $( "#report_box" ).replaceWith( '<div id="report_box">'+data.responseJSON.report+'</div>' );
                    }
                    if (data.responseJSON.import) {
                        $('#output_box').replaceWith('<div id="output_box" class="hidden-print">'+data.responseJSON.import+'</div>');
                    }
                    $('#modal-message').modal('show');
                    setTimeout(function() {$('#modal-message').modal('hide');}, 3000);
                }
            });


        };
    })(f);

    reader.readAsText(f);
}
}

Answer 1

由于没有人回答这个问题，我将根据我对不理解 utf-8 但生成 html 的遗留应用程序的即时翻译所做的类似工作来冒险回答。

它只涉及创建一个从有问题的字符代码到它的等效 html 实体的映射表。 ñ => ñ例如。这是一些示例代码。

function createEntities(source) {
    var map = [
       { key:"á", value: "<b>&aacute;</b>"},
       { key:"ñ", value: "<b>&ntilde;</b>"},
        { key:"ó", value: "<b>&oacute;</b>" },
       { key:"'", value: "<b>&apos;</b>" }
    ];
    var target = source;
    for ( prop in map ) {
       var pair = map[prop];
       target = target.replace(pair.key,pair.value)
    }
    return target;
}

这里有一个jsFiddle 演示了这一点。当然，您需要设置适当的映射。