Question

假设我有一个包含原始svg xml的大字符串，我想将<path的每个实例更改为<path class="pathX"（其中X是匹配项的索引）。在javascript中执行此操作的最佳方法是什么？我正在使用这个有效的代码，但我很好奇是否有更好的方法：

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 ');

Answer 1

如何解析XML字符串并使用DOM表示呢？使用jQuery：

doc = $.parseXML(xmlString);

没有jQuery：

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

然后你可以做这样的事情：

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

这是一种不易出错的方法。

Answer 2

使用XmlDOM和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);
    }

Answer 3

Bill F的解决方案很棒，实际上它可以防止文字字符串等，但是如果你想在没有XML转换的情况下保持简单，你可以：

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

Answer 4

您可以只替换字符串中的匹配项，并使用函数提供要替换为的值：

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

用包含实例索引的变量替换字符串的每个实例

4 个答案: