请求协助：为二进制转换器实现IP地址与二进制互转功能

我开发了一款二进制转换器，可实现十进制与二进制的互转，但目前仅支持单个十进制数（如172）转换为对应二进制（如10101100），以及单个二进制转换为十进制，无法处理完整IP地址的二进制转换及反向转换。现希望实现将IP地址拆分为4段进行转换的功能，该转换器基于JavaScript、HTML、CSS开发，现有代码如下：

现有JavaScript代码 #

//Initial References
let decInp = document.getElementById("dec-inp");
let binInp = document.getElementById("bin-inp");
let errorMsg = document.getElementById("error-msg");

//Convert decimal to binary when user inputs in the decimal field
decInp.addEventListener("input", () => {
  let decValue = parseInt(decInp.value);
  //Converts the decimal value to binary
  binInp.value = decValue.toString(2);
});

//Convert binary to decimal when user inputs in the binary field
binInp.addEventListener("input", () => {
  let binValue = binInp.value;
//If the binary number is valid convert it to decimal
  if (binValidator(binValue)) {
    decInp.value = parseInt(binValue, 2);
    errorMsg.textContent = "";
  }
  //Else display an error message
  else {
    errorMsg.textContent = "Wrong binary code";
  }
  //Function to check if the binary number is valid i.e it does not contain any number other than 0 and 1
  function binValidator(num) {
    for (let i = 0; i < num.length; i++) {
      if (num[i] != "0" && num[i] != "1") {
        return false;
      }
    }
    return true;
  }
});

现有HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Binary Converter</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
    
  <body>
    <div class="container">
      <h2>Binary Converter</h2>
      <div class="wrapper">
        <div class="input-wrapper">
          <label for="dec-inp">Decimal:</label>
          <input type="number" id="dec-inp" />
        </div>
        <div class="input-wrapper">
          <label for="bin-inp">Binary:</label>
          <input type="number" id="bin-inp" />
        </div>
      </div>
      <p id="error-msg"></p>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

现有CSS代码 #

body {
  background-color: #ffffff;
}
.container {
  background-color: #06f7ff;
  width: 30vmin;
  max-width: 38em;
  padding: 2em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 20%;
  left: 30%;
  
}
h2 {
  font-size: 2em;
  color: #000000;
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-bottom: 1.3em;
}

下面是修改后的完整代码，实现了十进制IP（如192.168.1.1）与二进制IP（如11000000.10101000.00000001.00000001）的互转，包含格式验证：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>IP二进制转换器</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h2>IP二进制转换器</h2>
    <div class="wrapper">
      <div class="input-wrapper">
        <label for="dec-ip-inp">十进制IP:</label>
        <input type="text" id="dec-ip-inp" placeholder="例如: 192.168.1.1" />
      </div>
      <div class="input-wrapper">
        <label for="bin-ip-inp">二进制IP:</label>
        <input type="text" id="bin-ip-inp" placeholder="例如: 11000000.10101000.00000001.00000001" />
      </div>
    </div>
    <p id="error-msg"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

修改后的CSS代码 #

body {
  background-color: #ffffff;
}
.container {
  background-color: #06f7ff;
  width: 90%;
  max-width: 38em;
  padding: 2em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 0.5em;
}
h2 {
  font-size: 2em;
  color: #000000;
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-bottom: 1.3em;
}
.input-wrapper {
  margin-bottom: 1.2em;
}
label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: 500;
}
input {
  width: 100%;
  padding: 0.8em;
  border: none;
  border-radius: 0.3em;
  font-size: 1em;
}
#error-msg {
  color: #ff3333;
  text-align: center;
  margin-top: 1em;
  font-weight: 500;
}

修改后的JavaScript代码 #

// 获取DOM元素
const decIpInp = document.getElementById("dec-ip-inp");
const binIpInp = document.getElementById("bin-ip-inp");
const errorMsg = document.getElementById("error-msg");

// 十进制IP转二进制IP
decIpInp.addEventListener("input", () => {
  const decIp = decIpInp.value.trim();
  errorMsg.textContent = "";
  
  // 验证十进制IP格式
  if (!validateDecimalIp(decIp)) {
    errorMsg.textContent = "请输入有效的十进制IP地址";
    binIpInp.value = "";
    return;
  }
  
  // 拆分IP段并转换
  const decSegments = decIp.split(".");
  const binSegments = decSegments.map(seg => {
    // 转换为8位二进制，不足补前导0
    return parseInt(seg).toString(2).padStart(8, "0");
  });
  
  binIpInp.value = binSegments.join(".");
});

// 二进制IP转十进制IP
binIpInp.addEventListener("input", () => {
  const binIp = binIpInp.value.trim();
  errorMsg.textContent = "";
  
  // 验证二进制IP格式
  if (!validateBinaryIp(binIp)) {
    errorMsg.textContent = "请输入有效的二进制IP地址";
    decIpInp.value = "";
    return;
  }
  
  // 拆分IP段并转换
  const binSegments = binIp.split(".");
  const decSegments = binSegments.map(seg => {
    return parseInt(seg, 2).toString();
  });
  
  decIpInp.value = decSegments.join(".");
});

// 验证十进制IP格式
function validateDecimalIp(ip) {
  const regex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  return regex.test(ip);
}

// 验证二进制IP格式
function validateBinaryIp(ip) {
  const regex = /^(([01]{8})\.){3}([01]{8})$/;
  return regex.test(ip);
}

关键功能说明 #

• IP格式验证：通过正则表达式确保输入的十进制IP是0-255的四段格式，二进制IP是每段8位的四段格式
• 分段转换：将IP按.拆分为4段，分别转换后再拼接
• 补位处理：十进制转二进制时自动补前导0，确保每段都是8位标准二进制段
• 错误提示：输入格式错误时显示对应提示信息

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