在组件名称中使用路径分隔符时拆分路径

Question

这感觉像是一个愚蠢的问题，但我有一个字符串：

aaaa/bbb\/ccc

\/ 表示在路径组件名称中使用的转义分隔符。

所以，字符串代表两个路径分量aaaa和bbb/ccc

此字符串是基于从路径组件创建路径的需要而生成的，其中需要使用 / 作为组件之间的分隔符，并且 / 也可能出现在组件名称中。这就是在组件名称中出现 / 时需要转义的原因。

可能有两个或多个组件。

使用像(?:\\\/|[^\/])+ 这样的正则表达式接近我正在寻找的内容，但是在考虑字符串this/is\/a/\/str\\/ing 时，它无法将其拆分为组件this 和is\/a 和\/str\\ 和@987654332 @。

相反，最终组件被确定为\/str\\/ing。

我的问题是，当组件分隔符可以用于组件名称时，javascript 代码是什么样的，它允许我将路径拆分为路径组件？

在上面的示例中，我希望得到两个字符串 aaaa 和 bbb/ccc？

是否有处理此问题的标准函数，或者我是否需要使用正则表达式来帮助我拆分？

谢谢。

Answer 1

const a = String.raw `aaaa/bbb\/ccc/ddd\/eee/fff/ggg`;
console.log(a.replace(/\\\//g, "|").split("/").map(x => x.replaceAll("|", "/")));

Answer 2

首先，因为这涉及到javascript及其转义规则，字符串aaaa/bbb\/ccc需要是aaaa/bbb\\/ccc。

这是我目前的解决方案：

  //path = "aaaa/\\bbb";
  //path = "this/is\\/a/dumb/str\\\\/ing";
  path = "aaaa/bbb\\/ccc";
  
  console.log("Path: ", path);

  const matches = path.match(/((?:[^\/\\]|\\\/|\\\\|\\)+)/g);

  console.log("M: ", matches);

  const pathComponents = matches.reduce((accumulator, component) => {
    component = component.replace("\\/", "/");
    accumulator.push(component);
    return accumulator;
  }, []);

  console.log("Path Components: ", pathComponents);
      
  pathComponents.forEach((component) => {
    console.log(`C: ${component}`);
  });
                

我需要通过第二遍运行匹配，以便转换匹配：

bbb\\/ccc

变成可以正确显示的东西。如果没有第二遍，它将显示为

bbb\/ccc

并且需要显示为：

bbb/ccc

案例#1

path = "aaaa/\\bbb";

我看到显示：

C: aaaa
C: \bbb

 

案例#2

path = "this/is\\/a/dumb/str\\\\/ing";

我看到显示：

C: this
C: is/a
C: dumb
C: str\\
C: ing

案例#3（类似于#2）

path = "aaaa/bbb\\/ccc";

我看到显示：

C: aaaa
C: bbb/ccc
     

在所有情况下都成功。

我相信我已经抓住了这里所有的边缘情况。

事实证明这是一个比我最初想象的更难的问题。

Answer 3

使用匹配，您可以使用：

(?:[^\n\/\\]+|\\[\\\/]?)+

说明

• (?:没有捕获组
  • [^\n\/\\]+ 匹配除换行符之外的任何字符 / 或 \
  • |或者
  • \\[\\\/]? 匹配 \ 和可选的 \ 或 /
• )+关闭非捕获组并重复1次以上

Regex demo

然后在比赛中，您可以将\/替换为/

const regex = /(?:[^\n\/\\]+|\\[\\\/]?)+/g;
[
  String.raw `aaaa/bbb\/ccc`,
  String.raw `this/is\/a/\/str\\/ing`,
  String.raw `aaaa/bbb\\/ccc/ddd\/eee/fff/ggg`,
  String.raw `this/is\/a/dumb/str\\/ing`,
  String.raw `aaaa/\\bbb`
].forEach(s =>
  console.log(Array.from(s.matchAll(regex), m => m[0].replace("\\/", "/")))
);

如果向后看is supported，您可能会使用 split 和交替来匹配字符串应该拆分的 2 个场景。

然后您可以将 \/ 替换为 / 用于结果数组，例如使用 Array map。

(?<=\\\\)\/|(?<!\\)\/

说明

• (?<=\\\\)\/ 匹配 / 时直接位于 \\ 前面
• |或者
• (?<!\\)\/ 匹配 /，如果前面没有 \

Regex demo

[
  String.raw `aaaa/bbb\/ccc`,
  String.raw `this/is\/a/\/str\\/ing`,
  String.raw `aaaa/bbb\\/ccc/ddd\/eee/fff/ggg`,
  String.raw `this/is\/a/dumb/str\\/ing`,
  String.raw `aaaa/\\bbb`
].forEach(s => console.log(
  s
  .split(/(?<=\\\\)\/|(?<!\\)\//)
  .map(m => m.replace("\\/", "/"))));