IP提取器对比器

需求:

一个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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学海无涯苦做java

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值