Replace each instance of a string with a variable that contains the instance index

Question

Assume I have a large string that contains raw svg xml, and I want to change each instance of <path to <path class="pathX" (where X is the index of the matched item). What's the best way to do this in javascript? I'm using this code, which works, but I'm curious if there's a better way:

var svgArray = mySvgStr.split('<path ');
for(var i = 1, len = svgArray.length; i < len; i++) {
  var newStr = 'class="path' + i + '" ' + svgArray[i];
  svgArray[i] = newStr;
}
var svgWithClasses = svgArray.join('<path ');

@stackErr is correct - don't parse the string - use an XML parser and modify things that way. You should be able to stringify the document once done — Ian
– Ian, Commented Feb 21, 2014 at 22:49

Willy · Accepted Answer · 2014-02-21 22:54:33Z

6

What about parsing the XML string and using a DOM representation instead? With jQuery:

doc = $.parseXML(xmlString);

Without jQuery:

var parser = new DOMParser();
var doc = parser.parseFromString(xmlString);

Then you can do stuff like this:

var paths = doc.getElementsByTagName('path');
// add attributes here

This is a much less error prone approach.

answered Feb 21, 2014 at 22:54

Willy

1,0748 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

stackErr · Accepted Answer · 2014-02-21 23:04:37Z

3

Using XmlDOM and XPath:

    xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); \\Create new XML Doc
    xmlDoc.async = "false";
    xmlDoc.loadXML(mySvgStr); \\Load your XML into the Doc


    var pathNodes = xmlDoc.selectNodes("path");
    var count = 1;
    for(count; count < pathNodes.length + 1; count++){
        pathNodes[count-1].setAttribute("class", "path" + count);
    }

answered Feb 21, 2014 at 23:04

stackErr

4,1704 gold badges27 silver badges50 bronze badges

Comments

Abraham Hamidi · Accepted Answer · 2014-02-21 23:04:04Z

0

Bill F's solution is great, in fact it protects against literal strings, etc, but if you want to keep it simple without XML conversions, you could:

var i = 0;
a = mySvgStr.replace(/<path /g, function (match) {
    return '<path class="path"' + i;
    i++;
});

answered Feb 21, 2014 at 23:04

Abraham Hamidi

13.9k3 gold badges39 silver badges52 bronze badges

Comments

Guffa · Accepted Answer · 2014-02-21 23:06:37Z

0

You can just replace the occurances in the string and use a function to supply the values to replace with:

var i = 1;
mySvgStr = mySvgStr.replace(/<path/g, function(){
  return '<path class="path' + (i++) + '"';
});

answered Feb 21, 2014 at 23:06

Guffa

703k112 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

Replace each instance of a string with a variable that contains the instance index

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related