前言

在JavaScript編程中，將ASCII碼轉(zhuǎn)換為十六進(jìn)制（Hex）碼的需求通常出現(xiàn)在處理字符編碼、數(shù)據(jù)校驗(yàn)、網(wǎng)絡(luò)通信等場景。在某些應(yī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編碼簡介

HEX編碼也稱之為Base16，它將每一個(gè)字節(jié)（8位）表示的十六進(jìn)制內(nèi)容，用兩個(gè)十六進(jìn)制數(shù)字（0-9, a-f/A-F）的字符串來顯示。作用是將不可見的、復(fù)雜的字節(jié)數(shù)組數(shù)據(jù)，轉(zhuǎn)換為可顯示的字符串?dāng)?shù)據(jù)。

場景示例

• Wi-Fi 配置：在 Wi-Fi 網(wǎng)絡(luò)的設(shè)置中，密碼可能需要以 HEX 碼格式進(jìn)行提交。例如，在路由器的配置界面，用戶輸入密碼時(shí)可以選擇 ASCII 或 HEX 格式提交密碼。
• 數(shù)據(jù)加密：某些加密算法使用 HEX 碼來表示數(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)

已最近開發(fā)中使用到的舉個(gè)例子 頁面設(shè)計(jì)如下圖所示

用戶界面設(shè)計(jì)

頁面設(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)通過則直接處理，反之提示用戶密碼強(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); // 按每兩個(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;
      }
    }
  
    // 如果沒有發(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ā)）

  再通過paword函數(shù)將當(dāng)前用戶輸入的HEX碼轉(zhuǎn)換回Ascll碼

  paword(str) {
    // 初始化一個(gè)空的數(shù)組，用來存儲(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));
    }
  
    // 返回通過 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 字符的開頭部分
  
      if (v && one.length == 8) {
        // 如果匹配到有效的 UTF-8 字符（即以多個(gè) 1 開頭，后面跟著 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;  // 跳過已經(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)證都通過，則處理用戶輸入的數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論