parse d attribute in SVG path element

Question

I'm trying to parse the d attribute in SVG Path element, and so far I found that fabric.js can parse SVG, but till now I still don't know how.

I need to parse the path in order to get the shapes in it (lines arcs) and draw squares over them, and most importantly return the attributes of these squares.

any idea how to do this using fabric.js?? or any other library?? or does anyone have a different approach?

the following image has a rectangle and a line both have squares that I drew on their boundaries, and I'm trying to do the same on the path element

Answer 1

I found this

var cmdRegEx = /[a-z][^a-z]*/ig;
var commands = d.match(cmdRegEx);

which can get each command with its parameters, but you need to trim each command from spaces

Answer 2

Based on zeacuss answer and Mark K Cowan suggestion, I'm using:

var cmdRegEx = /([MLQTCSAZVH])([^MLQTCSAZVH]*)/gi
var commands = d.match(cmdRegEx);

Answer 3

Stamped into the same problem. You can use the regep /-?\d+/ig which produces just the numbers, striped from letters, white spaces. and commas.