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

 更新时间:2025年03月11日 10:36:14   作者:爱在西元前1s  
这篇文章主要介绍了在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码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • 谈谈JS中的!!

    谈谈JS中的!!

    !!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false。下面看看通过本文给大家介绍了JS中的!!,需要的朋友参考下吧
    2017-12-12
  • 浅谈PDF.js使用心得

    浅谈PDF.js使用心得

    本篇文章主要介绍了浅谈PDF.js使用心得,pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持。非常具有实用价值,需要的朋友可以参考下
    2018-06-06
  • javascript自启动函数的问题探讨

    javascript自启动函数的问题探讨

    自启动函数想必大家并不陌生吧,在本文将为大家详细探讨下,感兴趣的朋友可不要错过
    2013-10-10
  • JavaScript使用Promise实现并发请求数限制

    JavaScript使用Promise实现并发请求数限制

    本文主要介绍了JavaScript使用Promise实现并发请求数限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 如何使用json在前后台进行数据传输实例介绍

    如何使用json在前后台进行数据传输实例介绍

    需要把这些输入写入数据库,这里就用到json传入,先看一下后台如何生成要传输的数据,感兴趣的朋友可以参考下,希望可以帮助到你
    2013-04-04
  • JavaScript实用技巧(一)

    JavaScript实用技巧(一)

    本文从7个方面讲述 JavaScript 中那些你不很熟知但非常实用的技巧。
    2010-08-08
  • 浅谈Webpack 是如何加载模块的

    浅谈Webpack 是如何加载模块的

    这篇文章主要介绍了Webpack 是如何加载模块的,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • JS 实现10进制转换36进制的示例代码

    JS 实现10进制转换36进制的示例代码

    这篇文章主要介绍了JS实现10进制转换36进制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • javascript中localStorage本地存储(新增、删除、修改)使用详细教程

    javascript中localStorage本地存储(新增、删除、修改)使用详细教程

    本地存储localstorage是一种在浏览器中存储数据的方式,可以将数据保存在用户的本地计算机上,以便在下一次访问网站时使用,下面这篇文章主要给大家介绍了关于javascript中localStorage本地存储(新增、删除、修改)使用详细教程,需要的朋友可以参考下
    2023-05-05
  • 浅析JavaScript中的特殊数据类型

    浅析JavaScript中的特殊数据类型

    在JavaScript中,有6大数据类型,分别包括string,number,boolean,undefined,null 和 object。下面通过通过本文给大家介绍JavaScript中的特殊数据类型,需要的朋友参考下吧
    2017-12-12

最新评论