姬婉溪
姬婉溪

浏览器端使用iconv-lite遇到的问题

需要在浏览器端实现对字符进行GB2312,GBK,GB18030编码解码，搜索如何解决本问题时
搜索到iconv-lite，一个纯JS字符编码转换工具。
文档中表示在浏览器端可以通过browserify或者webpack使用。
安装之后，在页面import后，devServer编译时报错！
主要是以下两种错误：

第一个 Can't resolve 'buffer'
2023-10-19_140135.png

对于这个错误，是因为需要依赖buffer，但是项目中没有。安装buffer即可

npm install -D buffer

安装之后再编译，这个错就没有了

第二个 Cannot parse JSON: Unexpected token ";"

image.png

这个错误是因为通过babel-loader解析iconv-lit中的json文件时出现了无法解析的错误。
显然，json文件不应该由babel-loader来解析
检查webpack.config.js文件发现了如下配置 

{
        test: /\.jsx?/i,
        use: ['babel-loader'],
 },

由于此配置，使.json后缀文件匹配上了/\.jsx?/i正则，导致json文件被babel-loader解析，并报了错。
改善一下正则即可。
改正为只有以.js或.jsx为结尾的文件，才使用babel-loader

{
        test: /\.jsx?$/i,
        use: ['babel-loader'],
 },

改正之后再重新运行run server

image.png

不报错啦！(*^▽^*)

iconv-lite如何使用呢？
直接看文档中的例子就可以了，可以将require方式改为import方式引入

import iconv from 'iconv-lite';

// Convert from an encoded buffer to a js string.
const str = iconv.decode(Buffer.from([0x68, 0x65, 0x6c, 0x6c, 0x6f]), 'GB2312');

// Convert from a js string to an encoded buffer.
const buf = iconv.encode("Sample input string", 'GB2312');

可以用啦(✧◡✧)

另外，在知乎中看到这样一篇文章，使用hack的方式获取编码
https://zhuanlan.zhihu.com/p/35537480
简单测试了一下，一般的文字是可以得到正确编码的，但是对于个别文字会得到意想不到的结果。
比如瞭，url中编码后的结果是 %B2t 。这个t是什么鬼我实在是无法理解，而且，我改变accept-charset 为GBK 或者GB18030后，对于这个字的编码都没有改变。我怀疑这种方式无法区分这三种编码，可能是因为这三种编码是向下兼容的吧 ⊙(・◇・)？
因此，我觉得这个方式应该是有点问题的。

这个hack方式的核心在于两点

第一

form表单的accept-charset属性，可以指定文本编码方式。设置input的value后，通过get方式提交表单，可以在url中的参数部分(也就是？后面)得到编码后的结果。

第二

由于form表单提交会刷新当前页面，所以创建一个隐藏的iframe，指定iframe的name属性。然后设置form表单的target属性与iframe的name一致。通过这种方式指定form提交到隐藏的iframe中，这样刷新的就是iframe，而不是当前页面。
最后通过iframe.contentWindow.location.href获取到iframe的url即可。

简单记录一下代码：
html部分