Add some text in loaded xml using Javascript and regex

Question

I have loaded an SVG file into memory in javascript.

I want to manipulate this data in memory using the Javascript replace function.

As you notice, there are many 'g' elements. I want to wrap them all into a new g element with an id called 'viewport'.

This is the svg (source):

<!--?xml version="1.0" ?-->
<svg xmlns="http://www.w3.org/2000/svg" width="822" height="600">
  <defs>
        ....
  </defs>
  <g id="edges" transform="translate(245.296 61.75) scale(0.630539)">
    ....
  </g>
  <g class="null current-task" id="S02" transform="translate(245.296 61.75) scale(0.630539)">
    ....
  </g>
  <g id="S04" transform="translate(245.296 61.75) scale(0.630539)">
    ....
  </g>
</svg>

And this is how it should be:

<!--?xml version="1.0" ?-->
<svg xmlns="http://www.w3.org/2000/svg" width="822" height="600">
  <defs>
        ....
  </defs>
  <g id="viewport">
    <g id="edges" transform="translate(245.296 61.75) scale(0.630539)">
      ....
    </g>
    <g class="null current-task" id="S02" transform="translate(245.296 61.75) scale(0.630539)">
    ....
    </g>
    <g id="S04" transform="translate(245.296 61.75) scale(0.630539)">
      ....
    </g>
   </g>
</svg>

How can this be done using Javascript and Regex (replace function?)?

score 0 · Answer 1 · edited May 23 '17 at 11:56

Firstly, using Regex on SVG is a pretty bad idea (slightly different topic, but still applicable RegEx match open tags except XHTML self-contained tags)

You should be able to manipulate with jQuery (or similar) like you would any other DOM-like structure.

I've just tested this (using the .wrap() call, borrowed from Peter's answer), and the result is an object that matches the structure you require:

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var mySvgMarkup = '<!--?xml version="1.0" ?-->' +
'<svg xmlns="http://www.w3.org/2000/svg" width="822" height="600">' +
  '<defs></defs>' +
  '<g id="edges" transform="translate(245.296 61.75) scale(0.630539)">' +
  '</g>' +
  '<g class="null current-task" id="S02" transform="translate(245.296 61.75) scale(0.630539)">' +
  '</g>' +
  '<g id="S04" transform="translate(245.296 61.75) scale(0.630539)">' +
  '</g>' +
'</svg>';

var $mySvg  = $(mySvgMarkup);
$('g', $mySvg).wrap($('<g id="viewport" />'));
</script>
</body>
</html>

In fact, the DOM has been alterered correctly, using wrapAll by the way, but the svg isn't shown (just a white block). Could there be a loading issue ? I am using angularJS to inject the html in my page. — Patrick Peters, Jul 17 '13 at 12:49

score 0 · Answer 2 · answered Jul 17 '13 at 11:40

0

Try using jQuery to parse the XML and then manipulating it like you would a DOM. Maybe something like

var svg = $.parseXML(svgAsString);
svg.find("[transform]").wrap($('<g id="viewport" />'))

answered Jul 17 '13 at 11:40

Peter

4,493
6
41
64

Peter, that was my old way of working (using wrapAll), but that didn't work. The SVG DOM nodes regarding the g element wrapping was not working, but strangly enough the width & height svg manipulation did work... – Patrick Peters Jul 17 '13 at 11:47

Add some text in loaded xml using Javascript and regex

2 Answers2