正则在Regexr可用但JS中失效，需提取带端口的IPv4/IPv6纯IP地址

原问题原因 #

你原来的正则 /^(?:[0-9.]+|(?:\[[0-9a-fA-F:]+\]))$/ 使用了 ^ 和 $ 锚定整个字符串，要求输入必须是纯IP地址（要么是IPv4格式，要么是带方括号的IPv6格式）。但你的输入是 IP:端口 的完整地址，超出了正则的匹配范围，所以 match 返回 null。

解决方案：修改正则捕获纯IP部分 #

下面的正则专门针对带端口的IPv4/IPv6地址设计，能直接提取出不带端口的纯IP：

// 匹配带端口的IPv4/IPv6，捕获纯IP部分
const ipExtractRegex = /^(?:([0-9.]+)|\[([0-9a-fA-F:]+)\]):\d+$/;

// 处理IPv6带端口的情况
const ipv6WithPort = '[2a00:1397:4:2a02::a1]:50434';
const ipv6Match = ipv6WithPort.match(ipExtractRegex);
const pureIpv6 = ipv6Match ? ipv6Match[2] : null;
console.log('提取的纯IPv6:', pureIpv6); // 输出: 2a00:1397:4:2a02::a1

// 处理IPv4带端口的情况
const ipv4WithPort = '127.0.0.1:50434';
const ipv4Match = ipv4WithPort.match(ipExtractRegex);
const pureIpv4 = ipv4Match ? ipv4Match[1] : null;
console.log('提取的纯IPv4:', pureIpv4); // 输出: 127.0.0.1

正则说明 #

• ^ 和 $：锚定整个字符串，确保匹配的是完整的IP:端口格式
• (?:...)：非捕获组，用来包裹两种IP格式的分支
  • ([0-9.]+)：捕获组1，匹配IPv4地址的数字+点组合
  • \[([0-9a-fA-F:]+)\]：捕获组2，匹配带方括号的IPv6，同时捕获括号内的纯IPv6地址
• :\d+：匹配端口部分（冒号+一串数字）

扩展：兼容不带端口的情况 #

如果你的输入可能同时存在带端口和不带端口的IP，可以把端口部分设为可选：

const flexibleRegex = /^(?:([0-9.]+)|\[([0-9a-fA-F:]+)\])(?::\d+)?$/;

// 测试不带端口的IPv6
const rawIpv6 = '[2a00:1397:4:2a02::a1]';
const rawIpv6Match = rawIpv6.match(flexibleRegex);
console.log('纯IPv6:', rawIpv6Match[2]); // 输出: 2a00:1397:4:2a02::a1

// 测试不带端口的IPv4
const rawIpv4 = '127.0.0.1';
const rawIpv4Match = rawIpv4.match(flexibleRegex);
console.log('纯IPv4:', rawIpv4Match[1]); // 输出: 127.0.0.1

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