在JS中按类型拆分可能相邻的未知长度元素的字符串

Posted 2023-05-09

【中文标题】在JS中按类型拆分可能相邻的未知长度元素的字符串

【英文标题】：Split string of possibly adjacent elements of unknown lenght by type in JS

【发布时间】：2019-06-29 11:42:30

【问题描述】：

给定一个字符串（实际上是一个svg路径）例如：

"M72 0v754h405v-86h-311v-211h302v-86h-302v-285h311v-86h-405z"

我想获得一个数组，其中每个元素要么是一个字母，要么是一个完整的正数或负数，如下所示：

[M, 72, 0, v, 754, h, 405, v, -86, h, -311, v, -211, h, 302, v, -86, h, -302, v, -285, h, 311, v, -86, h, -405, z]

我曾考虑将 split() 与正则表达式一起使用，但我认为这不适用于相邻元素，例如“M72”，因为它们之间没有任何东西可以作为拆分的目标。

唯一的解决方案是每个字符循环的自定义字符，它可以找到我正在寻找的每种元素的开始和结束，可能使用正则表达式？

谢谢

【参考方案1】：

您可以匹配带有可选减号的字母或数字。

var string = "M72 0v754h405v-86h-311v-211h302v-86h-302v-285h311v-86h-405zx-12.4y0.001",
    parts = string.match(/[a-z]|-?\d+\.?\d*/gi);
    
console.log(parts);

【讨论】：

我相信这与十进制数字不同，如 -86.5 ，因为 -86 和 5 被分开。如何在正则表达式中修复？谢谢

【参考方案2】：

您在使用正则表达式时走在正确的轨道上，但您可以利用 split 的优势，模式中的任何捕获组都将与匹配两侧的字符串一起返回。

像/\s*([-+]?\d+)\s*/g 这样的模式将选择任何数字并围绕这些数字拆分字符串。结果可能包含空字符串，但可以很容易地使用filter 删除这些字符串。

var input = "M72 0v754h405v-86h-311v-211h302v-86h-302v-285h311v-86h-405z";
var result = input.split(/\s*([-+]?\d+)\s*/g).filter(String);
console.log(result);

【讨论】：

这个答案有效，但 Nina Scholz 的答案更简洁。不需要 .filter()

没问题。我很高兴您能够找到解决方案。 FWIW，如果您只想解析有效的 SVG 路径，Piort Szlagura 的解决方案实际上更正确。

感谢@pswg 的提示，我很可能会在 node.js 中执行此操作，所以我想避免使用库，尤其是像 svg.js 这样复杂的东西，但我明白你的意思

【参考方案3】：

您可以使用 SVG.js 来实现：https://svgjs.dev/docs/2.7/classes/#svg-patharray