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

问题描述

我需要坚如磐石的RegExp来尝试解决Raphael.js parseStringPath处理中与弧路径命令有关的问题以及可能的其他问题（SnapSVG也会继承该问题）。您会看到arcTo path命令接受7个坐标和设置，但是由于进行了极大的优化，有些字符串可能格式错误，浏览器不会标记它们，而是正确地渲染它们。选中Raphael.js demo here。

看看这个例子，我使用的是Raphael.js的RegExp，还有一个非常简单的例子，我自己的RegExp名为incorrectReg，试图将000之类的字符串分解为[{ 1}}，0，0]或0插入[011，0，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和{ {1}}，实际上所有这些组都是一串布尔值。

同样，011 path命令可用于

我需要一个更好的arcTo RegExp和一系列解决方案的组合来正确处理arcTo -> ['A',rx,ry,xAxisRotation,largeArcFlag,sweepFlag,x,y] // str,float,boolean (0|1),float和其他类似情况。公开接受任何建议。

谢谢

解决方法

根据OP下的讨论，我建议不要使用regexp，而应该使用适当的解析器（或lexer或tokenizer或如何正确调用它）。

您可以

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

我什至不确定是否可以创建这样的“ super”正则表达式。无论如何，您可以在解析过程中使用“ sub” regexp：-）

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

不幸的是，incorrectReg RegExp的优缺点不能起作用，因为它也可以更改其他值（例如，TheFourthBird提供的RegExp会M0,11返回["M",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>

javascript raphael regex svg