前端處理ASCII碼轉HEX碼及校驗具體實現(xiàn)

更新時間：2025年03月11日 10:36:14 作者：愛在西元前1s

這篇文章主要介紹了在JavaScript編程中將ASCII碼轉換為十六進制（HEX）碼的需求和場景,包括Wi-Fi配置、數(shù)據(jù)加密和網絡協(xié)議傳輸?shù)?文章詳細描述了HEX編碼的原理和作用,并提供了具體實現(xiàn)的示例,需要的朋友可以參考下

前言

在JavaScript編程中，將ASCII碼轉換為十六進制（Hex）碼的需求通常出現(xiàn)在處理字符編碼、數(shù)據(jù)校驗、網絡通信等場景。在某些應用場景下，我們需要將 ASCII 字符串轉換成 HEX 碼，這通常用于加密、網絡通信或其他需要將文本數(shù)據(jù)編碼為十六進制格式的情況。特別是在網絡協(xié)議、密碼設置、Wi-Fi 配置等領域，往往要求密碼或數(shù)據(jù)以 HEX 格式進行傳輸或存儲。

HEX編碼簡介

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

場景示例

Wi-Fi 配置：在 Wi-Fi 網絡的設置中，密碼可能需要以 HEX 碼格式進行提交。例如，在路由器的配置界面，用戶輸入密碼時可以選擇 ASCII 或 HEX 格式提交密碼。
數(shù)據(jù)加密：某些加密算法使用 HEX 碼來表示數(shù)據(jù)的二進制形式，因此需要將 ASCII 字符串轉換為 HEX 碼進行處理。
網絡協(xié)議：在一些網絡協(xié)議中，數(shù)據(jù)通常以 HEX 格式進行傳輸，因此需要將用戶輸入的 ASCII 字符串轉換為 HEX。

具體實現(xiàn)

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

用戶界面設計

頁面設計允許用戶輸入密碼或其他字符串，并選擇輸入方式為ASCII或HEX格式。系統(tǒng)會根據(jù)用戶選擇的格式進行有效性檢查，并轉換或校驗輸入數(shù)據(jù)。

格式驗證與轉換

ASCII格式驗證

用戶選擇ASCII格式后，系統(tǒng)檢查輸入的字符是否符合ASCII編碼規(guī)范。
根據(jù)實際要求的密碼強度規(guī)范進行校驗，如果校驗通過則直接處理，反之提示用戶密碼強度不符合規(guī)范。

HEX格式驗證與轉換

用戶選擇HEX格式后，使用pachars函數(shù)檢查輸入是否為有效的HEX字符串。

pachars(str) {
  var reg = /^[2-7][0-9a-fA-F]$/; // 匹配 HEX 格式：首字符為 2-7，第二個字符為 0-9 或 a-f/A-F
  var arr = str.match(/.{1,2}/g); // 按每兩個字符分割字符串

  if (!arr) {
    return false;
  }

  // 遍歷所有 HEX 字符對
  for (let i = 0; i < arr.length; i++) {
    /**匹配ASCII碼的16進制數(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碼則進行下一步轉Ascll碼校驗（注：當前Ascll轉HEX碼只是在web端進行一個轉換校驗實際下發(fā)底層還是以Ascll下發(fā)）

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

paword(str) {
  // 初始化一個空的數(shù)組，用來存儲轉換后的十進制數(shù)字
  let buf = [];

  // 循環(huán)遍歷字符串，每次取 2 個字符作為一組
  for (let i = 0; i < str.length; i += 2) {
    // 取出當前的 2 個字符，并將其作為十六進制字符串轉換為十進制數(shù)字
    buf.push(parseInt(str.substring(i, i + 2), 16));
  }

  // 返回通過 this.ps() 函數(shù)處理后的數(shù)組
  return this.ps(buf);
},

    
    
//將一個數(shù)字數(shù)組（通常為十六進制的字節(jié)數(shù)組）轉換為對應的字符串
ps(arr) {
  if (typeof arr === 'string') {
    return arr;  // 如果輸入已經是字符串，直接返回
  }

  let UTF = '', _arr = arr;  // 初始化一個空字符串 UTF，用于存儲解碼后的字符
  for (let i = 0; i < _arr.length; i++) {
    let one = _arr[i].toString(2);  // 將當前的十六進制數(shù)轉換為二進制字符串
    let v = one.match(/^1+?(?=0)/);  // 匹配二進制字符串中的 UTF-8 字符的開頭部分

    if (v && one.length == 8) {
      // 如果匹配到有效的 UTF-8 字符（即以多個 1 開頭，后面跟著 0）
      let bytesLength = v[0].length;  // 獲取該字節(jié)是幾個字節(jié)的 UTF-8 編碼
      let store = _arr[i].toString(2).slice(7 - bytesLength);  // 截取對應的 UTF-8 編碼的字節(jié)部分

      // 遍歷后續(xù)字節(jié)并提取其有效二進制位，構建完整的 UTF-8 編碼
      for (let st = 1; st < bytesLength; st++) {
        store += _arr[st + i].toString(2).slice(2);  // 拼接后續(xù)字節(jié)的有效二進制位
      }

      // 將二進制數(shù)據(jù)轉換為字符，并添加到 UTF 字符串中
      UTF += String.fromCharCode(parseInt(store, 2));
      i += bytesLength - 1;  // 跳過已經處理的字節(jié)
    } else {
      // 如果不是 UTF-8 字符，直接按 ASCII 編碼處理
      UTF += String.fromCharCode(_arr[i]);
    }
  }

  return UTF;  // 返回解碼后的字符串
}

?然后再使用轉換后的Ascll碼進行密碼強度規(guī)范校驗如果不滿足則提示報錯信息