IP提取器对比器

news2025/11/4 18:24:25

需求：

一个html 页面，有两个输入框第一个输入框输入文本中包含多个ip，输入的ip是不规则的，需要使用正则表达式提取出输入文本的ip地址，然后在第二个输入框中输入内容，并提取出内容的ip ，如果第一个输入框和第二个输入框中的ip有符合的在页面中显示处理

1.输入文本框可以调大一点，点击提取按钮后，显示三块内容，第一块显示输入文本中提取的所有ip 第二块显示输入内容提取的所有ip 第三块显示输入文本和输入内容中共同有的ip

<!DOCTYPE html>
<html>
<head>
  <title>IP提取器</title>
  <style>
    textarea {
      width: 400px;
      height: 200px;
    }
  </style>
  <script>
    function extractIP() {
      var inputText = document.getElementById('inputText').value;
      var ipRegex = /\b(?:\d{1,3}\.){3}\d{1,3}\b/g;
      var extractedIPs = inputText.match(ipRegex);

      var inputContent = document.getElementById('inputContent').value;
      var contentIPs = inputContent.match(ipRegex);

      var matchingIPs = [];
      if (extractedIPs && contentIPs) {
        for (var i = 0; i < extractedIPs.length; i++) {
          if (contentIPs.includes(extractedIPs[i])) {
            matchingIPs.push(extractedIPs[i]);
          }
        }
      }

      document.getElementById('extractedIPs').innerText = extractedIPs ? extractedIPs.join(', ') : '无';
      document.getElementById('contentIPs').innerText = contentIPs ? contentIPs.join(', ') : '无';
      document.getElementById('matchingIPs').innerText = matchingIPs.length > 0 ? matchingIPs.join(', ') : '无';
    }
  </script>
</head>
<body>
  <h1>IP提取器</h1>

  <label for="inputText">输入文本:</label>
  <br>
  <textarea id="inputText"></textarea>

  <br><br>

  <label for="inputContent">输入内容:</label>
  <br>
  <textarea id="inputContent"></textarea>

  <br><br>

  <button onclick="extractIP()">提取IP</button>

  <br><br>

  <h3>提取的IP地址:</h3>
  <div id="extractedIPs">无</div>

  <h3>内容中的IP地址:</h3>
  <div id="contentIPs">无</div>

  <h3>共同的IP地址:</h3>
  <div id="matchingIPs">无</div>
</body>
</html>