前端實作字串GBK與GB2312的編解碼(小結)

前言

在開發專案的時候遇到的一個比較坑的問題，產品要求從瀏覽器拿到瀏覽器地址欄裡面的搜尋字詞進行判斷，我們一般使用的都是UTF-8的編碼格式，但是百度和谷歌在搜尋字詞編碼的時候都是使用的GBK編碼，這就導致，解碼失敗，於是就在網上找解決方法，最終找到了一位前輩整理出來的方法，透過iframe解決了這個問題，所以特此總結一下，方便自己以後使用，也希望能幫助到更多的人，最後會放上前端文章的連結。

1、編碼(支援GBK和GB2312)

為了避免麻煩，我們可以將表單的請求頁面設定為當前頁面，將回呼函數放在頁面JS的最前面，這樣當此頁面存在父頁面並且__encode__iframe__callback__定義了，就可以直接執行回調，並關閉視窗：

 if (parent.__encode__iframe__callback__) { // 判斷目前頁面是否為子視窗 parent.__encode__iframe__callback__(location.search.split('=')[1]);
//直接關閉目前子視窗 window.close();
}
function GBKEncode(str, charset, callback) {
//建立form透過accept-charset做encode
var form = document.createElement('form');
form.method = 'get';
form.style.display = 'none';
form.acceptCharset = charset;
if (document.all) {
//如果是IE那麼就呼叫document.charset方法 window.oldCharset = document.charset;
document.charset = charset;
}
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'str';
input.value = str;
form.appendChild(input);
form.target = '__encode__iframe__'; // 指定提交的目標的iframe
document.body.appendChild(form);
//隱藏iframe截取提交的字串 if (!window['__encode__iframe__']) {
var iframe;
iframe = document.createElement('iframe');
iframe.setAttribute('name', '__encode__iframe__');
iframe.style.display = 'none';
iframe.width = "0";
iframe.height = "0";
iframe.scrolling = "no";
iframe.allowtransparency = "true";
iframe.frameborder = "0";
iframe.src = 'about:blank'; // 設定為空白 document.body.appendChild(iframe);
}
//
window.__encode__iframe__callback__ = function (str) {
callback(str);
if (document.all) {
document.charset = window.oldCharset;
}
}
//設定回呼編碼頁面的位址，這裡需要使用者修改 form.action = window.location.href;
form.submit();
setTimeout(function () {
form.parentNode.removeChild(form);
iframe.parentNode.removeChild(iframe);
}, 1000) // 0.5秒後移除節點}
GBKEncode('需要編碼的字元', 'gb2312', callback);// 測試// promise封裝var encode = function encode(str) {
var charset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'gbk';
return new Promise(function (resolve, reject) {
try {
_encode(str, charset, function (data) {
resolve(data);
});
} catch (e) {
resolve('字元編碼錯誤.', e.toString());
}
});
};

二、解碼（支援GBK、GB2312、Base64）

 function randomId() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}return text;
}

function _decode(str, charset, callback) {
var script = document.createElement('script');
var id = randomId(); // 產生唯一ID，防止衝突 script.id = '_urlDecodeFn_' + id;
window['_urlDecodeFn_' + id] = callback;
var src = 'data:text/javascript;charset=' + charset + (',_urlDecodeFn_' + id + '("') + str + '");';
src += 'document.getElementById("_urlDecodeFn_' + id + '").parentNode.removeChild(document.getElementById("_urlDecodeFn_' + id + '"));';
script.src = src;
document.body.appendChild(script);
}
_decode('需要解碼的字元', 'gb2312', callback) // 測試// promise封裝var decode = function decode(str) {
var charset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'gbk';
return new Promise(function (resolve, reject) {
try {
_decode(str, charset, function (data) {
resolve(data);
});
} catch (e) {
resolve('字元解碼錯誤.', e.toString());
}
});
};

參考連結：https://zhuanlan.zhihu.com/p/35537480

到此這篇關於前端實現字符串GBK與GB2312的編解碼(小結)的文章就介紹到這了,更多相關字符串GBK與GB2312的編解碼內容請搜索downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！