前端處理ASCII碼轉(zhuǎn)HEX碼及校驗(yàn)具體實(shí)現(xiàn)
前言
在JavaScript編程中,將ASCII
碼轉(zhuǎn)換為十六進(jìn)制(Hex
)碼的需求通常出現(xiàn)在處理字符編碼、數(shù)據(jù)校驗(yàn)、網(wǎng)絡(luò)通信等場(chǎng)景。在某些應(yīng)用場(chǎng)景下,我們需要將 ASCII
字符串轉(zhuǎn)換成 HEX
碼,這通常用于加密、網(wǎng)絡(luò)通信或其他需要將文本數(shù)據(jù)編碼為十六進(jìn)制格式的情況。特別是在網(wǎng)絡(luò)協(xié)議、密碼設(shè)置、Wi-Fi 配置等領(lǐng)域,往往要求密碼或數(shù)據(jù)以 HEX
格式進(jìn)行傳輸或存儲(chǔ)。
HEX編碼簡(jiǎn)介
HEX編碼也稱之為Base16,它將每一個(gè)字節(jié)(8位)表示的十六進(jìn)制內(nèi)容,用兩個(gè)十六進(jìn)制數(shù)字(0-9, a-f/A-F)的字符串來(lái)顯示。作用是將不可見(jiàn)的、復(fù)雜的字節(jié)數(shù)組數(shù)據(jù),轉(zhuǎn)換為可顯示的字符串?dāng)?shù)據(jù)。
場(chǎng)景示例
- Wi-Fi 配置:在
Wi-Fi
網(wǎng)絡(luò)的設(shè)置中,密碼可能需要以 HEX 碼格式進(jìn)行提交。例如,在路由器的配置界面,用戶輸入密碼時(shí)可以選擇 ASCII 或 HEX 格式提交密碼。 - 數(shù)據(jù)加密:某些加密算法使用 HEX 碼來(lái)表示數(shù)據(jù)的二進(jìn)制形式,因此需要將 ASCII 字符串轉(zhuǎn)換為 HEX 碼進(jìn)行處理。
- 網(wǎng)絡(luò)協(xié)議:在一些網(wǎng)絡(luò)協(xié)議中,數(shù)據(jù)通常以 HEX 格式進(jìn)行傳輸,因此需要將用戶輸入的 ASCII 字符串轉(zhuǎn)換為 HEX。
具體實(shí)現(xiàn)
已最近開(kāi)發(fā)中使用到的舉個(gè)例子 頁(yè)面設(shè)計(jì)如下圖所示
用戶界面設(shè)計(jì)
頁(yè)面設(shè)計(jì)允許用戶輸入密碼或其他字符串,并選擇輸入方式為ASCII或HEX格式。系統(tǒng)會(huì)根據(jù)用戶選擇的格式進(jìn)行有效性檢查,并轉(zhuǎn)換或校驗(yàn)輸入數(shù)據(jù)。
格式驗(yàn)證與轉(zhuǎn)換
ASCII格式驗(yàn)證
- 用戶選擇ASCII格式后,系統(tǒng)檢查輸入的字符是否符合ASCII編碼規(guī)范。
- 根據(jù)實(shí)際要求的密碼強(qiáng)度規(guī)范進(jìn)行校驗(yàn),如果校驗(yàn)通過(guò)則直接處理,反之提示用戶密碼強(qiáng)度不符合規(guī)范。
HEX格式驗(yàn)證與轉(zhuǎn)換
用戶選擇HEX格式后,使用
pachars
函數(shù)檢查輸入是否為有效的HEX字符串。pachars(str) { var reg = /^[2-7][0-9a-fA-F]$/; // 匹配 HEX 格式:首字符為 2-7,第二個(gè)字符為 0-9 或 a-f/A-F var arr = str.match(/.{1,2}/g); // 按每?jī)蓚€(gè)字符分割字符串 if (!arr) { return false; } // 遍歷所有 HEX 字符對(duì) for (let i = 0; i < arr.length; i++) { /**匹配ASCII碼的16進(jìn)制數(shù) * 首 2-7f * 尾 1-9 a-F * 不匹配20 7F 7f * */ if (!reg.test(arr[i]) || /^(20|7f|7F)$/.test(arr[i])) { return false; } } // 如果沒(méi)有發(fā)現(xiàn)不符合條件的字符,返回成功 return true; }
如果是規(guī)范的HEX碼 則進(jìn)行下一步轉(zhuǎn)
Ascll
碼校驗(yàn)(注:當(dāng)前Ascll
轉(zhuǎn)HEX碼只是在web端進(jìn)行一個(gè)轉(zhuǎn)換校驗(yàn) 實(shí)際下發(fā)底層還是以Ascll
下發(fā))再通過(guò)
paword
函數(shù)將當(dāng)前用戶輸入的HEX碼轉(zhuǎn)換回Ascll
碼paword(str) { // 初始化一個(gè)空的數(shù)組,用來(lái)存儲(chǔ)轉(zhuǎn)換后的十進(jìn)制數(shù)字 let buf = []; // 循環(huán)遍歷字符串,每次取 2 個(gè)字符作為一組 for (let i = 0; i < str.length; i += 2) { // 取出當(dāng)前的 2 個(gè)字符,并將其作為十六進(jìn)制字符串轉(zhuǎn)換為十進(jìn)制數(shù)字 buf.push(parseInt(str.substring(i, i + 2), 16)); } // 返回通過(guò) this.ps() 函數(shù)處理后的數(shù)組 return this.ps(buf); }, //將一個(gè)數(shù)字?jǐn)?shù)組(通常為十六進(jìn)制的字節(jié)數(shù)組)轉(zhuǎn)換為對(duì)應(yīng)的字符串 ps(arr) { if (typeof arr === 'string') { return arr; // 如果輸入已經(jīng)是字符串,直接返回 } let UTF = '', _arr = arr; // 初始化一個(gè)空字符串 UTF,用于存儲(chǔ)解碼后的字符 for (let i = 0; i < _arr.length; i++) { let one = _arr[i].toString(2); // 將當(dāng)前的十六進(jìn)制數(shù)轉(zhuǎn)換為二進(jìn)制字符串 let v = one.match(/^1+?(?=0)/); // 匹配二進(jìn)制字符串中的 UTF-8 字符的開(kāi)頭部分 if (v && one.length == 8) { // 如果匹配到有效的 UTF-8 字符(即以多個(gè) 1 開(kāi)頭,后面跟著 0) let bytesLength = v[0].length; // 獲取該字節(jié)是幾個(gè)字節(jié)的 UTF-8 編碼 let store = _arr[i].toString(2).slice(7 - bytesLength); // 截取對(duì)應(yīng)的 UTF-8 編碼的字節(jié)部分 // 遍歷后續(xù)字節(jié)并提取其有效二進(jìn)制位,構(gòu)建完整的 UTF-8 編碼 for (let st = 1; st < bytesLength; st++) { store += _arr[st + i].toString(2).slice(2); // 拼接后續(xù)字節(jié)的有效二進(jìn)制位 } // 將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為字符,并添加到 UTF 字符串中 UTF += String.fromCharCode(parseInt(store, 2)); i += bytesLength - 1; // 跳過(guò)已經(jīng)處理的字節(jié) } else { // 如果不是 UTF-8 字符,直接按 ASCII 編碼處理 UTF += String.fromCharCode(_arr[i]); } } return UTF; // 返回解碼后的字符串 }
?然后再使用轉(zhuǎn)換后的Ascll
碼進(jìn)行密碼強(qiáng)度規(guī)范校驗(yàn) 如果不滿足則提示報(bào)錯(cuò)信息
參數(shù)驗(yàn)證與最終處理
- 對(duì)于轉(zhuǎn)換和校驗(yàn)后的結(jié)果,系統(tǒng)進(jìn)一步驗(yàn)證其是否符合指定的格式要求。
- 如果所有驗(yàn)證都通過(guò),則處理用戶輸入的數(shù)據(jù)(例如,將其發(fā)送到服務(wù)器進(jìn)行進(jìn)一步處理)。
- 如果驗(yàn)證失敗,則向用戶顯示相應(yīng)的錯(cuò)誤信息,并提示用戶重新輸入。
總結(jié)
到此這篇關(guān)于前端處理ASCII碼轉(zhuǎn)HEX碼及校驗(yàn)具體實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)前端處理ASCII碼轉(zhuǎn)HEX碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript引用類型Date常見(jiàn)用法實(shí)例分析
這篇文章主要介紹了JavaScript引用類型Date常見(jiàn)用法,結(jié)合實(shí)例形式分析了引用類型Date基本創(chuàng)建、參數(shù)使用及相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08javascript權(quán)威指南 學(xué)習(xí)筆記之javascript數(shù)據(jù)類型
JavaScript中允許使用三種基本數(shù)據(jù)類型 數(shù)字,文本字符和布爾值。其中數(shù)字包括符點(diǎn)數(shù).此外,它還支持兩種小數(shù)據(jù)類型 -null(空)和undefined(未定義),該兩種小數(shù)據(jù)類型,它們各自只定義了一個(gè)值 。2011-09-09js實(shí)現(xiàn)網(wǎng)頁(yè)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05ECMA5數(shù)組的新增方法有哪些及forEach()模仿實(shí)現(xiàn)
這篇文章主要介紹了ECMA5數(shù)組的新增方法有哪些及forEach()模仿實(shí)現(xiàn),需要的朋友可以參考下2015-11-11JavaScript實(shí)現(xiàn)簡(jiǎn)易的水印覆蓋功能
本文將簡(jiǎn)單實(shí)現(xiàn)一個(gè)覆蓋水印的小功能,水印一般都是添加在圖片上,然后直接加載處理過(guò)的圖片url即可,這里并沒(méi)有修改圖片,而是直接的在待添加水印的?dom?上添加一個(gè)?canvas?蒙版,需要的可以參考一下2022-12-12使用window.print()前端實(shí)現(xiàn)網(wǎng)頁(yè)打印超詳細(xì)教程(含代碼示例)
前端實(shí)現(xiàn)打印功能的方法有很多,大家在網(wǎng)上隨便一搜就是一大堆,下面這篇文章主要給大家介紹了關(guān)于使用window.print()前端實(shí)現(xiàn)網(wǎng)頁(yè)打印的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06js光標(biāo)定位文本框回車表單提交問(wèn)題的解決方法
這篇文章主要介紹了js光標(biāo)定位文本框回車表單提交問(wèn)題的解決方法,涉及javascript阻止瀏覽器默認(rèn)事件的方法,需要的朋友可以參考下2015-05-05