前端处理ASCII码转HEX码及校验具体实现

这篇文章主要介绍了在JavaScript编程中将ASCII码转换为十六进制（HEX）码的需求和场景,包括Wi-Fi配置、数据加密和网络协议传输等,文章详细描述了HEX编码的原理和作用,并提供了具体实现的示例,需要的朋友可以参考下

前言

在JavaScript编程中，将ASCII码转换为十六进制（Hex）码的需求通常出现在处理字符编码、数据校验、网络通信等场景。在某些应用场景下，我们需要将 ASCII 字符串转换成 HEX 码，这通常用于加密、网络通信或其他需要将文本数据编码为十六进制格式的情况。特别是在网络协议、密码设置、Wi-Fi 配置等领域，往往要求密码或数据以 HEX 格式进行传输或存储。

HEX编码简介

HEX编码也称之为Base16，它将每一个字节（8位）表示的十六进制内容，用两个十六进制数字（0-9, a-f/A-F）的字符串来显示。作用是将不可见的、复杂的字节数组数据，转换为可显示的字符串数据。

场景示例

• Wi-Fi 配置：在 Wi-Fi 网络的设置中，密码可能需要以 HEX 码格式进行提交。例如，在路由器的配置界面，用户输入密码时可以选择 ASCII 或 HEX 格式提交密码。
• 数据加密：某些加密算法使用 HEX 码来表示数据的二进制形式，因此需要将 ASCII 字符串转换为 HEX 码进行处理。
• 网络协议：在一些网络协议中，数据通常以 HEX 格式进行传输，因此需要将用户输入的 ASCII 字符串转换为 HEX。

具体实现

已最近开发中使用到的举个例子 页面设计如下图所示

用户界面设计

页面设计允许用户输入密码或其他字符串，并选择输入方式为ASCII或HEX格式。系统会根据用户选择的格式进行有效性检查，并转换或校验输入数据。

格式验证与转换

ASCII格式验证

• 用户选择ASCII格式后，系统检查输入的字符是否符合ASCII编码规范。
• 根据实际要求的密码强度规范进行校验，如果校验通过则直接处理，反之提示用户密码强度不符合规范。

HEX格式验证与转换

• 用户选择HEX格式后，使用pachars函数检查输入是否为有效的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进制数
       * 首 2-7f
       * 尾 1-9 a-F
       * 不匹配20 7F 7f
       * */
      if (!reg.test(arr[i]) || /^(20|7f|7F)$/.test(arr[i])) {
        return false;
      }
    }
  
    // 如果没有发现不符合条件的字符，返回成功
    return true;
  }
  

  如果是规范的HEX码 则进行下一步转Ascll码校验（注：当前Ascll转HEX码只是在web端进行一个转换校验 实际下发底层还是以Ascll下发）

  再通过paword函数将当前用户输入的HEX码转换回Ascll码

  paword(str) {
    // 初始化一个空的数组，用来存储转换后的十进制数字
    let buf = [];
  
    // 循环遍历字符串，每次取 2 个字符作为一组
    for (let i = 0; i < str.length; i += 2) {
      // 取出当前的 2 个字符，并将其作为十六进制字符串转换为十进制数字
      buf.push(parseInt(str.substring(i, i + 2), 16));
    }
  
    // 返回通过 this.ps() 函数处理后的数组
    return this.ps(buf);
  },
  
      
      
  //将一个数字数组（通常为十六进制的字节数组）转换为对应的字符串
  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);  // 将当前的十六进制数转换为二进制字符串
      let v = one.match(/^1+?(?=0)/);  // 匹配二进制字符串中的 UTF-8 字符的开头部分
  
      if (v && one.length == 8) {
        // 如果匹配到有效的 UTF-8 字符（即以多个 1 开头，后面跟着 0）
        let bytesLength = v[0].length;  // 获取该字节是几个字节的 UTF-8 编码
        let store = _arr[i].toString(2).slice(7 - bytesLength);  // 截取对应的 UTF-8 编码的字节部分
  
        // 遍历后续字节并提取其有效二进制位，构建完整的 UTF-8 编码
        for (let st = 1; st < bytesLength; st++) {
          store += _arr[st + i].toString(2).slice(2);  // 拼接后续字节的有效二进制位
        }
  
        // 将二进制数据转换为字符，并添加到 UTF 字符串中
        UTF += String.fromCharCode(parseInt(store, 2));
        i += bytesLength - 1;  // 跳过已经处理的字节
      } else {
        // 如果不是 UTF-8 字符，直接按 ASCII 编码处理
        UTF += String.fromCharCode(_arr[i]);
      }
    }
  
    return UTF;  // 返回解码后的字符串
  }
  

​然后再使用转换后的Ascll码进行密码强度规范校验 如果不满足则提示报错信息

参数验证与最终处理

• 对于转换和校验后的结果，系统进一步验证其是否符合指定的格式要求。
• 如果所有验证都通过，则处理用户输入的数据（例如，将其发送到服务器进行进一步处理）。
• 如果验证失败，则向用户显示相应的错误信息，并提示用户重新输入。

总结 

到此这篇关于前端处理ASCII码转HEX码及校验具体实现的文章就介绍到这了,更多相关前端处理ASCII码转HEX码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• javascript ASCII和Hex互转的实现方法