使用 Javascript 编辑 IPv4 和 IPv6 地址

Question

概述

我正在建立一个有两个文本input和output的网站

这个概念相当简单，我想：

使用正则表达式解析输入以匹配任何 IPv4/IPv6 地址
使用.replace 或任何其他方法将它们编辑为 [IPv4]、[IPv6]
在output中显示output

我让它完美地适用于 IPv4，我可以粘贴一大块文本，它会按预期编辑所有 IPv4 地址。

问题

正则表达式，或者可能是 javascript 替换 IPv6 的 function 无法正常工作。

HTML 重现问题

<html>
<head>
</head>
   <body>
   <div>
      <label for="input" class= "left">Input Text</label>
      <label for="output" class = "right">Obfuscated Text - Click Text to Copy</label>
      <span></span>
      <textarea id="input"></textarea>
      <textarea id="output"></textarea>
   </div>
   <br>
   <button onclick="obfuscate()">Obfuscate</button>
   <script>
      function obfuscate() {
         // Get the input and output textareas
         var input = document.getElementById("input");
         var output = document.getElementById("output");

         // Obfuscate the text in the input textarea
         var obfuscatedText = input.value.replace(/\b(?:(?: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]?)\b/g, "[IPv4]")
         var lines = obfuscatedText.split('\n')
         const modifiedLines = lines.map(line => line.replace(/\b(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))\b/,"[IPv6]"));

         // Set the value of the output textarea to the obfuscated text
         output.value = modifiedLines.join('\n');
      }
   </script>
   </body>
</html>

笔记

最初是为了 [IPv6] 没有任何内容被编辑，我在网上读到 replace 无法处理非常大的字符串。 所以我把它分解成单独的行。 这样效果更好，但仍然不能替换所有匹配项。

当前行为

即使是很小的input

subnet6 3ffe:501:ffff:100::/64 {
    # Two addresses available to clients
    #  (the third client should get NoAddrsAvail)
    range6 3ffe:501:ffff:100::10 3ffe:501:ffff:100::11;

    # Use the whole /64 prefix for temporary addresses
    #  (i.e., direct application of RFC 4941)
    range6 3ffe:501:ffff:100:: temporary;

    # Some /64 prefixes available for Prefix Delegation (RFC 3633)
    prefix6 3ffe:501:ffff:100:: 3ffe:501:ffff:111:: /64;
}

# A second subnet behind a relay agent
subnet6 3ffe:501:ffff:101::/64 {
    range6 3ffe:501:ffff:101::10 3ffe:501:ffff:101::11;

    # Override of the global definitions,
    # works only when a resource (address or prefix) is assigned
    option dhcp6.name-servers 3ffe:501:ffff:101:200:ff:fe00:3f3e;

}

它无法编辑所有 v6 地址

Output：

subnet6 3ffe:501:ffff:100::/64 {
    # Two addresses available to clients
    #  (the third client should get NoAddrsAvail)
    range6 [IPv6]10 3ffe:501:ffff:100::11;

    # Use the whole /64 prefix for temporary addresses
    #  (i.e., direct application of RFC 4941)
    range6 3ffe:501:ffff:100:: temporary;

    # Some /64 prefixes available for Prefix Delegation (RFC 3633)
    prefix6 3ffe:501:ffff:100:: 3ffe:501:ffff:111:: /64;
}

# A second subnet behind a relay agent
subnet6 3ffe:501:ffff:101::/64 {
    range6 [IPv6]10 3ffe:501:ffff:101::11;

    # Override of the global definitions,
    # works only when a resource (address or prefix) is assigned
    option dhcp6.name-servers [IPv6];

}

我很讨厌正则表达式

我从ihateregex.io站点借用正则表达式来匹配 IPv6。

在他们的网站上，当我使用之前的相同输入样本对其进行测试时，它与所有地址完美匹配，所以这就是我被卡住的地方。

SO 上有 2 个类似的问题，一个是使用 php，另一个是使用 python。如果可能的话，我想在 javascript 中全部完成，这样文本仍然是客户端。

Answer 1

我从 ihateregex.io 站点借用正则表达式来匹配 IPv6。

...但是您在该正则表达式中添加了\b 。 对于正则表达式开头的\b来说，这没有问题，但对于正则表达式的结尾，它是。 问题是 IPv6 地址可能以冒号结尾。 在这种情况下， \b将要求最后一个冒号后跟一个字母数字。 这就是文中部分IPv6地址不匹配的原因。

所以...删除正则表达式末尾的\b 。

其次，如果您希望匹配多个，则需要提供g修饰符。

现在没有必要将文本分成几行：

 var input = document.getElementById("input"); var output = document.getElementById("output"); function obfuscate() { output.value = input.value.replace(/\b(?:(?: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]?)\b/g, "[IPv4]").replace(/\b(([\da-f]{1,4}:){7}[\da-f]{1,4}|([\da-f]{1,4}:){1,7}:|([\da-f]{1,4}:){1,6}:[\da-f]{1,4}|([\da-f]{1,4}:){1,5}(:[\da-f]{1,4}){1,2}|([\da-f]{1,4}:){1,4}(:[\da-f]{1,4}){1,3}|([\da-f]{1,4}:){1,3}(:[\da-f]{1,4}){1,4}|([\da-f]{1,4}:){1,2}(:[\da-f]{1,4}){1,5}|[\da-f]{1,4}:((:[\da-f]{1,4}){1,6})|:((:[\da-f]{1,4}){1,7}|:)|fe80:(:[\da-f]{0,4}){0,4}%[\da-z]+|(::(ffff(:0{1,4})?:)?|([\da-f]{1,4}:){1,4}:)((25[0-5]|(2[0-4]|1?\d)?\d)\.){3}(25[0-5]|(2[0-4]|1?\d)?\d))/g,"[IPv6]"); } input.value = `su.net6 3ffe:501:ffff:100::/64 { # Two addresses available to clients # (the third client should get NoAddrsAvail) range6 3ffe:501:ffff:100::10 3ffe:501:ffff:100::11; # Use the whole /64 prefix for temporary addresses # (ie, direct application of RFC 4941) range6 3ffe:501:ffff:100:: temporary; # Some /64 prefixes available for Prefix Delegation (RFC 3633) prefix6 3ffe:501:ffff:100:: 3ffe:501:ffff:111:: /64; } # A second su.net behind a relay agent su.net6 3ffe:501:ffff:101::/64 { range6 3ffe:501:ffff:101::10 3ffe:501:ffff:101::11; # Override of the global definitions, # works only when a resource (address or prefix) is assigned option dhcp6.name-servers 3ffe:501:ffff:101:200:ff:fe00:3f3e; }`; obfuscate();

 table { border-collapse: collapse; margin: 10px 0 10px 0 } textarea { width: 45vw; height: 75vh }

 <table> <tr><th>Input Text<button onclick="obfuscate()">Obfuscate</button></th><th>Obfuscated Text</th></tr> <tr><td><textarea id="input"></textarea></td><td><textarea id="output"></textarea></tr> </table>

使用 Javascript 编辑 IPv4 和 IPv6 地址

问题描述

概述

问题

HTML 重现问题

笔记

当前行为

我很讨厌正则表达式

1 个解决方案

解决方案1
2 已采纳 2023-01-31 19:17:12

使用 Javascript 编辑 IPv4 和 IPv6 地址

问题描述

概述

问题

HTML 重现问题

笔记

当前行为

我很讨厌正则表达式

1 个解决方案

解决方案1 2 已采纳 2023-01-31 19:17:12

解决方案1
2 已采纳 2023-01-31 19:17:12