需要帮助从 JavaScript 中的字符串中提取数字

Question

我需要一个坚如磐石的正则表达式来尝试解决 Raphael.js parseStringPath 处理有关 Arc 路径命令和可能的其他命令的一些问题（SnapSVG 也继承了该问题）。你看，arcTo path 命令接受 7 个坐标和设置，但是某些字符串可能由于极端优化而格式错误，并且浏览器不会标记它们，而是正确呈现它们。检查Raphael.js demo here。

看看这个例子，我使用来自 Raphael.js 的 RegExp 和一个非常简单的例子，我自己的 RegExp 名为 incorrectReg，试图将 000 之类的字符串分解为 [0,@987654328 @,0] 或 011 转换为 [0,1,1]。

let spaces = "\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029",
    pathValues = new RegExp(`(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[${spaces}]*,?[${spaces}]*`, `ig`),
    incorectReg = new RegExp(`([${spaces}]*0(?=[a-z0-9])|([${spaces}]\\0)*0(?=[a-z0-9]*))`, `ig`); // THIS ONE

function action(){
  let input = document.getElementById('input'),
      output = document.getElementById('output'),
      pathValue = input.getAttribute('d'),
      segments = pathValue.replace(/([a-z])/gi,'|$1').split('|').filter(x=>x.trim()),
      pathArray = []
      
  segments.map(x=>{
    let pathCommand = x[0],
        pathParams = x.replace(pathCommand,'').trim()
        
    pathArray.push( [pathCommand].concat(
      pathParams.replace(',',' ')
                .replace(pathValues,' $1 ')
                .replace(incorectReg,'$1 ')
                .split(' '))
                .filter(x=>x)
    );
  })
  output.setAttribute('d',pathArray.map(x=>x.join(' ')).join(''))

  console.table(pathArray)
}

svg {max-width:49%}

<button onclick="action()">Extract</button>
<hr>
<svg viewBox="0 0 16 16">
  <path id="input" d="M2,0a2 2 0 00,-2 2a2 2 0 002 2a.5.5 0 011 0z" stroke="red" stroke-width="1px" fill="none"></path>
</svg>

<svg viewBox="0 0 16 16">
  <path id="output" d="M0 0" stroke="green" stroke-width="1" fill="none"></path>
</svg>

正如您在浏览器控制台中看到的，我们已经解决了000 组（这显然不是一个有效的数字、布尔值或任何特定的东西），我们只需要解决011 和11，其中所有这些组实际上都是一串布尔值。

同样，arcTo 路径命令适用于

arcTo -> ['A', rx,    ry,    xAxisRotation, largeArcFlag,  sweepFlag,     x,     y]
       // str, float, float, float,         boolean (0|1), boolean (0|1), float, float

我需要更好的incorrectReg RegExp 和组合解决方案来正确处理主要是arcTo 和其他类似情况。接受任何建议。

谢谢

Answer 1

根据 OP 下面的讨论，我建议不要使用正则表达式，而是使用适当的解析器（或词法分析器或标记器或如何正确调用它）。

你可以

• 编写自己的解析器（很好的练习）
• 使用现有的东西，例如我已经成功尝试 svg-path-parser。

我什至不确定是否可以创建这样的“超级”正则表达式。无论如何您可以在解析过程中使用“子”正则表达式:-)

Answer 2

为了清楚起见并为社区服务，我将发布一个可行的解决方案，它可能会在未来对某人有所帮助。

不幸的是incorrectReg RegExp，好的或坏的不能工作，因为它也可以改变其他值（例如：M0,11 使用TheFourthBird 提供的正则表达式返回["M",0,1,1]），所以是的Jan，你是对的！

这是一个可行的解决方案，如果您愿意，请随时编辑或添加更多清晰度。一旦我们都同意一个坚如磐石的解决方案，我会立即向 Raphael 提交 PR。

let spaces = "\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029",
    pathValues = new RegExp(`(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[${spaces}]*,?[${spaces}]*`, `ig`),
    incorrectReg = new RegExp(`(?<=[01${spaces}]+)([01])[${spaces}]*`, `g`); // FIXED ONE

function action(){
  let input = document.getElementById('input'),
      output = document.getElementById('output'),
      pathValue = input.getAttribute('d'),
      segments = pathValue.replace(/([a-z])/gi,'|$1').split('|').filter(x=>x.trim()),
      pathArray = []
      
  segments.map(x=>{
    let pathCommand = x[0],
        pathParams = x.replace(pathCommand,'').trim();

    pathParams = pathParams.replace(',',' ')
                .replace(pathValues,' $1 ')
                                /* .replace(incorrectReg,' $& ') */
                .split(' ').filter(x=>x);

    if ( pathCommand.toLowerCase() === 'a' && pathParams.length < 7){
      for (let i=0, ln = pathParams.length; i<ln; i++){
        if ( (i === 3 || i === 4) && pathParams[i].length > 1 ) {
          pathParams = pathParams.slice(0,i) // first part of array
                        .concat(pathParams[i][0]) // extract largeArcFlag OR sweepFlag
                        .concat(
                            pathParams[i].slice(1).replace(/(\-\d|\-\.\d|\.\d*(?=\.))/g,'|$1').split('|'), // get sweepFlag
                            pathParams.slice(i+1)) // continue after flags
                        .filter(x=>x) // remove added empty "space" items
          ln = pathParams.length // update length
        }
      }
      if (pathParams.length === 7) {
        pathArray.push([pathCommand].concat(pathParams.splice(0, 7)));
      } else {
        throw Error(`arcTo requires 7 coordinates, only ${pathParams.length + ' given: ['+pathParams.join(',')}]`)
      }
    } else {
      pathArray.push( [pathCommand].concat(pathParams) );
    }
  })
  output.setAttribute('d',pathArray.map(x=>x.join(' ')).join(''))

  // console.log(pathArray)
}

svg {max-width:49%}

<button onclick="action()">Extract</button>
<hr>
<svg viewBox="0 0 16 16">
  <path id="input" d="M2 0a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2H2zm7.5 11h-4a.5.5 0 01-.5-.5v-4a.5.5 0 011 0v2.793l4.146-4.147a.5.5 0 01.708.708L6.707 10H9.5a.5.5 0 010 1z" fill="red"></path>
</svg>

<svg viewBox="0 0 16 16">
  <path id="output" d="M0 0" fill="green"></path>
</svg>