Get lowercase tag names with xmldom.XMLSerializer in Node.js

Question

I'm using Node.js to save a D3 graph to a file. The code is returning the SVG tags as all-caps instead of lowercase tags:

<SVG height="300" width="460" xmlns="http://www.w3.org/2000/svg">
        <G transform="translate(230,150)">
            <PATH d="M6.123031769111886e-15,-100A100,100 0 0,1 90.12430862004372,43.33138580473872L45.06215431002186,21.66569290236936A50,50 0 0,0 3.061515884555943e-15,-50Z" fill="#1f77b4"/>
            <PATH d="M90.12430862004372,43.33138580473872A100,100 0 0,1 4.27399232527422,99.90862319941907L2.13699616263711,49.954311599709534A50,50 0 0,0 45.06215431002186,21.66569290236936Z" fill="#aec7e8"/>
            <PATH d="M4.27399232527422,99.90862319941907A100,100 0 0,1 -64.73671010012329,76.21783495621347L-32.368355050061645,38.10891747810673A50,50 0 0,0 2.13699616263711,49.954311599709534Z" fill="#ff7f0e"/>
            <PATH d="M-64.73671010012329,76.21783495621347A100,100 0 0,1 -99.89978970073908,-4.4757142165364L-49.94989485036954,-2.2378571082682A50,50 0 0,0 -32.368355050061645,38.10891747810673Z" fill="#ffbb78"/>
            <PATH d="M-99.89978970073908,-4.4757142165364A100,100 0 0,1 -1.836909530733566e-14,-100L-9.18454765366783e-15,-50A50,50 0 0,0 -49.94989485036954,-2.2378571082682Z" fill="#2ca02c"/>
        </G>
    </SVG>

The node.js script:

require('d3');
var xmldom = require('xmldom');

var dataset = {
    apples: [53245, 28479, 19697, 24037, 40245],
};

var width = 460,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
    .enter().append("path")
    .attr("fill", function (d, i) {
    return color(i);
})
    .attr("d", arc);
var svgObject = d3.select("svg").attr('xmlns', 'http://www.w3.org/2000/svg');
var xml = new xmldom.XMLSerializer().serializeToString(svgObject[0][0]);

console.log(xml);

How do you get the tag names as lowercase names (which SVG needs)?

Answer 1

Unfortunately this lowerCase option does not seem to be supported right now by xmldom.

So you can either ask for it on github or fork your own version of the module in the meantime.

You have to change this line to grab the lowercase version of the tag names :

https://github.com/jindw/xmldom/blob/master/dom.js#L919

Use

var nodeName = node.localName;

Instead of

var nodeName = node.tagName;

Answer 2

If it is really a string you want, you might try to use REGEXP, an example (now prevents lowercase in cdata):

function dom_string_lower(ds){
    var cd = {}, //var to backup cdata contents
        i = 0,//key integer to cdata token
        tk = String(new Date().getTime());//cdata to restore

    //backup cdata and attributes, after replace string by tokens
    ds = ds.replace(/\<!\[CDATA\[.*?\]\]\>|[=]["'].*?["']/g, function(a){
        var k = tk + "_" + (++i);
        cd[k] = a;
        return k;
    });

    //to lower xml/html tags
    ds = ds.replace(/\<([^>]|[^=])+([=]| |\>)/g, function(a, b){
        return String(a).toLowerCase();
    });

    //restore cdata contents
    for(var k in cd){
        ds = ds.replace(k, cd[k]);
    }

    cd = null;//Clean variable
    return ds;
}

var xml = new xmldom.XMLSerializer().serializeToString(svgObject[0][0]);
console.log( dom_string_lower(xml) );

//test case
var test = "<SVG TITLE=\"ABC\"><ABC >A</ABC><test><![CDATA[TEST CASE]]></test></SVG>";
console.log( dom_string_lower(test) );

Hope that helps.