Javascript regex classname issue

Question

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!

adeneo · Accepted Answer · 2013-09-09 02:00:48Z

1

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 img    = imgs[i],
        iClass = img.className,
        iSrc   = img.src.split('/').pop(),
        span   = $('<span />', {'class': 'iconfont '+iClass+' '+iSrc,
                                title  : img.parentNode.title
                 });

    $(img).replaceWith(span);
}

answered Sep 9, 2013 at 2:00

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

user1525612 Over a year ago

this works great apart from that it adds the whole img source as classname instead of only the bit after the 'folder/' .

user1525612 Over a year ago

but I have replaced your "/" with a "%2F" and now it is perfect thanks a million!

jfriend00 · Accepted Answer · 2013-09-09 02:01:10Z

1

Change this:

 var span = document.createElement("span");
 span.addClass("iconfont");

to this:

 var span = document.createElement("span");
 span.className = "iconfont tinyicon edit";

Your addClass() wouldn't work anyway because span is a DOM node, not a jQuery object.

answered Sep 9, 2013 at 2:01

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-09-09 02:03:53Z

1

        var span = document.createElement("span");
        var className = "iconfont " + imgs[i].className + ' ' + imgs[i].src.match(/([a-z])$/i, '')
        span.className  = className ;
        span.title = imgs[i].parentNode.title;
        imgs[i].parentNode.replaceChild(span, imgs[i]);

answered Sep 9, 2013 at 2:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

user1525612 Over a year ago

thank you this looks promising, but instead of adding the img source as class, it adds "folder,folder" - maybe your regex code is not quite right?

Collectives™ on Stack Overflow

Javascript regex classname issue

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related