javascript - 使用正则表达式拆分字符串 accur 'undefined'

Question

我希望从 URL 中提取以下字段，如协议(protocol)、域名、端口和路径。

我知道这个split 函数对我很有帮助。这是我的代码

"https://www.test.com:8081/a/b/c".split(/(:\/\/)|(:)|(\/)/)

结果是

["https", "://", undefined, undefined, "www.test.com", undefined, ":", undefined, "8081", undefined, undefined, "/", "a", undefined, undefined, "/", "b", undefined, undefined, "/", "c"]

我期望的结果是

['https', '://', 'www.test.com', ':', '8081', '/', 'a/b/c']

为什么会出现 undefined ？如何更正我的正则表达式？

Answer 1

当然，捕获组会包含在拆分的结果中 - 当您交替使用在特定迭代中不匹配的捕获组时，捕获group 不会匹配，但它仍然是 split 中的捕获组，因此 undefined 被添加到数组的那个位置。例如:

console.log('abc'.split(/b|(wontmatch)/));

// a more complicated example:

console.log('abcde'.split(/(b)|(d)/));

/*
[
  "a",        split substring
  "b",        b was captured, so it's included in the match
  undefined,  the (d) part did not match, but it's another capturing group, so "undefined"
  "c",        split substring
  undefined,  the (b) part did not match, but it's another capturing group, so "undefined"
  "d",        d was captured, so it's included in the match
  "e"         split substring
]
*/

您遇到的行为只是上述行为的更复杂版本。

您可能会考虑使用match 而不是split，它可能更容易理解:

const str = "https://www.test.com:8081/a/b/c";
const matches = str.match(/([^:]+)(:\/\/)([^:]+)(:)(\d+)(\/)(.*$)/);
console.log(matches);

// I expect the result is
// ['https', '://', 'www.test.com', ':', '8081', '/', 'a/b/c']

或者，如果您只想要协议(protocol)、域名、端口和路径，请删除无用的捕获组:

const str = "https://www.test.com:8081/a/b/c";
const [, protocol, domain, port, path] = str.match(
  /([^:]+):\/\/([^:]+):(\d+)\/(.*$)/
);
console.log(protocol, domain, port, path);

如果端口是可选的，则将其和前面的:放入一个可选的非捕获组中，并将第二个字符集改为[^:/]确保它不匹配斜杠:

const str = "https://www.test.com/a/b/c";
const [, protocol, domain, port, path] = str.match(
  /([^:]+):\/\/([^:/]+)(?::(\d+))?\/(.*$)/
);
console.log(protocol, domain, port, path);