JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="input">#map?svg(target-id:map;){circle{cx:336;cy:144;r:18}polyline(marker-end:url(%23svgeodata-arrow);stroke-width:5px;){215,117,83,168,159,301,372,221,402,272,386,279}}&svg(target-id:house;){rect(fill:blue;){x:10;y:15;width:42;height:23}}</textarea><br>
<button onclick="return !!go();">do it</button>
<hr>
<pre id="output"></pre>
CSS
body, textarea, button {
background-color: black;
color: #0f0;
font-family: monospace;
}
button, textarea, hr {
border: 1px solid #0f0;
}
textarea {
width: 500px;
height: 100px;
}
JavaScript
// for shepazu
function go() {
var input = document.getElementById('input').value;
var output = parseSvgData(input);
//console.log(output);
document.getElementById('output').innerText = JSON.stringify(output, void 0, 2);
}
function parseSvgData(input) {
var params = input.split(/[?&]/);
var anchor = params.shift();
var data = [];
params.forEach(function(param) {
var svg_cssprops_elements = param.match(/^([\w-]+)\(([^{]*)\){(.*)}/i);
//console.log(svg_cssprops_elements);
if (!svg_cssprops_elements) {
console.log('unparsable param:\n' + param);
return;
}
var subdata = [
[
svg_cssprops_elements[1],
svg_cssprops_elements[2]
],
[]
];
var elements = svg_cssprops_elements[3].match(/([\w-]+)(\([^{]*\))?({[^}]*})/g);
//console.log(elements);
(elements || []).forEach(function(element) {
var element_cssprops_values = element.match(/^([\w-]+)(?:\(([^{]*)\))?{(.*)}/i);
//console.log(element_cssprops_values);
if (!element_cssprops_values) {
console.log('unparsable element:\n' + element);
return;
}
var elementdata = [];
elementdata.push(element_cssprops_values[1]);
if (element_cssprops_values[2]) elementdata.push(element_cssprops_values[2]);
if (element_cssprops_values[3]) elementdata.push(element_cssprops_values[3]);
subdata[1].push(elementdata);
});
data.push(subdata);
});
return data;
}
// by fro