如何使用正则表达式指定字符串分隔符？

Question

我有一个字符串'w_600,h_600/c_overlay:{c_fit,w_570,h_256/c_crop,w_600,h_600/main_image},g_center,y_-157,x_0/c_overlay:{c_crop,w_300,h_300/main_image}/FFFFFF'。

我想用/ 分割字符串，但是，我只想将/ 用作不在{...} 内的分隔符。

所以拆分字符串后的结果是：

['w_600,h_600', 'c_overlay{c_fit,w_570,h_256/c_crop,w_600,h_600/main_image},g_center,y_-157,x_0', 'c_overlay:{c_crop,w_300,h_300/main_image}', 'FFFFFF']

我尝试使用.split(/(?<!{.*?)\/|(?<=}.*?)\//)，但如果有多个{...}，它会无法正常工作。

console.log('w_600,h_600/c_overlay:{c_fit,w_570,h_256/c_crop,w_600,h_600/main_image},g_center,y_-157,x_0/c_overlay:{c_crop,w_300,h_300/main_image}/FFFFFF'.split(/(?<!{.*?)\/|(?<=}.*?)\//))

Answer 1

我不确定正则表达式方法，但您可以使用如下函数：

TS Playground

function splitOnTokenOutsideOpenClose (input, splitToken, openToken, closeToken) {
  let nestingCount = 0;
  let current = '';
  const result = [];

  for (const unit of input) {
    if (unit === openToken) nestingCount += 1;
    else if (unit === closeToken) nestingCount -= 1;
    if (unit !== splitToken || nestingCount > 0) {
      current += unit;
      continue;
    }
    result.push(current);
    current = '';
  }

  if (current.length > 0) result.push(current);
  return result;
}

const input = `w_600,h_600/c_overlay:{c_fit,w_570,h_256/c_crop,w_600,h_600/main_image},g_center,y_-157,x_0/c_overlay:{c_crop,w_300,h_300/main_image}/FFFFFF`;

const result = splitOnTokenOutsideOpenClose(input, '/', '{', '}');
console.log(result);

Answer 2

从上面的评论...

... 具有积极前瞻的方法 .../\/(?=(?:[^}]+\{)|(?:[^}{]+$)|$)/g ... 具有三个 OR 组合模式，以匹配/覆盖任何可能出现的分隔符。

编辑根据第四只鸟的建议

上述模式可以简写为...\/(?=[^}]+{|[^}{]*$)

// // see ... [https://regex101.com/r/HYRvIM/1]
// const regXSplit = /\/(?=(?:[^}]+\{)|(?:[^}{]+$)|$)/g;

// changed according to "The fourth bird"'s suggestion
// 
// see ... [https://regex101.com/r/HYRvIM/2]
const regXSplit = /\/(?=[^}]+{|[^}{]*$)/g;

console.log(
  'w_600,h_600/c_overlay:{c_fit,w_570,h_256/c_crop,w_600,h_600/main_image},g_center,y_-157,x_0/c_overlay:{c_crop,w_300,h_300/main_image}/FFFFFF'
    .split(regXSplit)
);
console.log(
  'w_600,h_600/c_overlay:{c_fit,w_570,h_256/c_crop,w_600,h_600/main_image},g_center,y_-157,x_0/c_overlay:{c_crop,w_300,h_300/main_image}/FFFFFF/'
    .split(regXSplit)
);
console.log(
  'w_600,h_600/c_overlay:{c_fit,w_570,h_256/c_crop,w_600,h_600/main_im/age},g_center/,y_-157,x_0/c_overlay:{c_crop,w_/300,h_300/main_image}/FFF/FFF/'
    .split(regXSplit)
);

.as-console-wrapper { min-height: 100%!important; top: 0; }