Sunday, 8 September 2013

Javascript regex classname issue

Javascript regex classname issue

Apologies for the vague title of this question!
I have the following JS, it looks for img tags with images of certain
sources. It then replaces the img tag with a span so that I can replace
the images/icons with iconfonts.
var paths = [
"folder%2Fadd",
"folder%2Fclear",
"folder%2Fdelete",
"folder%2Fedit",
"folder%2Fmove",
"folder%2Fsort",
];
var fullPaths = paths.map(function(x) { return "img[src*='" + x +
"']"; } );
var imgs = document.querySelectorAll(fullPaths);
for (var i = 0; i < imgs.length; i++) {
var span = document.createElement("span");
span.addClass("iconfont");
span.title = imgs[i].parentNode.title;
imgs[i].parentNode.replaceChild(span, imgs[i]);
}
Everything is working nicely so far, but there is one more issue that I
cannot solve.
Apart from adding a class to the span of .iconfont, I also want to add two
more classes to the span - 1) the original class of the replaced img
element, and 2) the name of the image source as in my array, but without
the 'folder/' bit in front.
So, at the moment I have:
<img class = "tinyicon" src="******/t/edit">
and my script creates this in the DOM:
<span class = "iconfont">
But I want my script to create the following:
<span class = "iconfont tinyicon edit">
That is what I am after :)
Thanks for having a look!

No comments:

Post a Comment