如何解决需要帮助从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
]。
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命令可用于
11
我需要一个更好的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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。