当前位置：首页 > news >正文

IP提取器对比器

news 2025/8/7 23:14:49

需求：

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