十进制（Octet格式）与十六进制互转逻辑及UI交互实现求助

核心逻辑梳理 #

当用户切换单选按钮（Decimal/Hexadecimal）时，触发文本框内容的格式转换：

• Decimal转Hexadecimal：将以.分隔的Octet十进制字符串，转为无分隔的两位十六进制拼接字符串
• Hexadecimal转Decimal：将无分隔的十六进制字符串，按每两位一组转为Octet十进制，并用.连接

具体实现步骤 #

1. 十进制Octet转十六进制

• 拆分输入：将文本框中的十进制字符串按.分割为Octet数组，例如"111.111.111"拆分为["111", "111", "111"]
• 格式校验：检查每个Octet是否为0-255之间的整数（超出范围或非数字均视为无效输入）
• 转换拼接：将每个Octet转为两位十六进制字符串（不足两位补前导零，例如10转为0A），最终拼接成无分隔的十六进制字符串（示例：111→6F，拼接后为6F6F6F）

2. 十六进制转十进制Octet

• 清洗输入：移除输入中的非十六进制字符（仅保留0-9、A-F/a-f）
• 格式校验：检查清洗后的字符串长度是否为偶数（每个Octet对应两位十六进制，奇数长度视为无效）
• 分组转换：按每两位一组拆分十六进制字符串，将每组转为十进制数，最终用.连接成Octet格式（示例：7DFF7B拆分为["7D", "FF", "7B"]，转成十进制后为125.255.123）

3. 单选按钮切换事件处理

• 给两个单选按钮绑定change事件，触发时先获取当前文本框的内容
• 根据选中的单选按钮类型，调用对应的转换函数
• 若转换成功，更新文本框内容；若输入格式无效，给出提示并恢复之前的单选按钮选择（或清空输入）

示例代码（原生JavaScript） #

// 获取DOM元素
const decimalRadio = document.getElementById('decimal-radio');
const hexRadio = document.getElementById('hex-radio');
const inputBox = document.getElementById('conversion-input');

// 十进制Octet转十六进制
function decOctetToHex(decStr) {
  const octets = decStr.split('.');
  // 校验每个Octet是否为0-255的整数
  if (!octets.every(octet => /^\d+$/.test(octet) && parseInt(octet) >= 0 && parseInt(octet) <= 255)) {
    return null;
  }
  // 转两位十六进制并拼接，统一转大写
  return octets.map(octet => {
    const hex = parseInt(octet).toString(16);
    return hex.length === 1 ? `0${hex}` : hex;
  }).join('').toUpperCase();
}

// 十六进制转十进制Octet
function hexToDecOctet(hexStr) {
  const cleanHex = hexStr.replace(/[^0-9A-Fa-f]/g, '');
  // 校验长度是否为偶数
  if (cleanHex.length % 2 !== 0) {
    return null;
  }
  // 分组转换
  const octets = [];
  for (let i = 0; i < cleanHex.length; i += 2) {
    const hexPair = cleanHex.slice(i, i + 2);
    octets.push(parseInt(hexPair, 16).toString());
  }
  return octets.join('.');
}

// 切换事件处理函数
function handleConversion() {
  const currentValue = inputBox.value.trim();
  if (!currentValue) return;

  if (decimalRadio.checked) {
    const decResult = hexToDecOctet(currentValue);
    if (decResult) {
      inputBox.value = decResult;
    } else {
      alert('无效的十六进制输入，请输入偶数长度的十六进制字符');
      hexRadio.checked = true;
    }
  } else {
    const hexResult = decOctetToHex(currentValue);
    if (hexResult) {
      inputBox.value = hexResult;
    } else {
      alert('无效的十进制Octet输入，请输入0-255之间的整数，用.分隔');
      decimalRadio.checked = true;
    }
  }
}

// 绑定事件监听
decimalRadio.addEventListener('change', handleConversion);
hexRadio.addEventListener('change', handleConversion);

内容的提问来源于stack exchange，提问作者madhu