前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))

前言
在開發(fā)項目的時候遇到的一個比較坑的問題,產(chǎn)品要求從瀏覽器拿到瀏覽器地址欄里面的搜索詞進(jìn)行判斷,我們一般使用的都是UTF-8的編碼格式,但是百度和谷歌在對搜索詞編碼的時候都是使用的GBK編碼,這就導(dǎo)致,解碼失敗,于是就在網(wǎng)上找解決方法,最終找到了一位前輩整理出來的方法,通過iframe解決了這個問題,所以特此總結(jié)一下,方便自己以后使用,也希望能幫助到更多的人,最后會放上前端文章的鏈接。
1、編碼(支持GBK和GB2312)
為了避免麻煩,我們可以將表單的請求頁面設(shè)定為當(dāng)前頁面,將回調(diào)函數(shù)放在頁面JS的最前面,這樣當(dāng)此頁面存在父頁面并且__encode__iframe__callback__定義了,就可以直接執(zhí)行回調(diào),并關(guān)閉窗口:
if (parent.__encode__iframe__callback__) { // 判斷當(dāng)前頁面是否為子窗口 parent.__encode__iframe__callback__(location.search.split('=')[1]); //直接關(guān)閉當(dāng)前子窗口 window.close(); } function GBKEncode(str, charset, callback) { //創(chuàng)建form通過accept-charset做encode var form = document.createElement('form'); form.method = 'get'; form.style.display = 'none'; form.acceptCharset = charset; if (document.all) { //如果是IE那么就調(diào)用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__'; // 指定提交的目標(biāo)的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'; // 設(shè)置為空白 document.body.appendChild(iframe); } // window.__encode__iframe__callback__ = function (str) { callback(str); if (document.all) { document.charset = window.oldCharset; } } //設(shè)置回調(diào)編碼頁面的地址,這里需要用戶修改 form.action = window.location.href; form.submit(); setTimeout(function () { form.parentNode.removeChild(form); iframe.parentNode.removeChild(iframe); }, 1000) // 0.5秒后移除節(jié)點 } 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
到此這篇關(guān)于前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))的文章就介紹到這了,更多相關(guān)字符串GBK與GB2312的編解碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
網(wǎng)頁編碼之GB2312、GBK與UTF-8的區(qū)別
這篇文章主要介紹了網(wǎng)頁編碼之GB2312、GBK與UTF-8的區(qū)別,,需要的朋友可以參考下2019-12-19網(wǎng)頁編碼為什么不用gbk或者gb2312而用utf-8
GBK的文字編碼是雙字節(jié)來表示的,至于UTF-8編碼則是用以解決國際上字符的一種多字節(jié)編碼,正如標(biāo)題所言,下面為大家詳細(xì)介紹下到底是為什么呢2019-12-01