JavaScript正则表达式类名问题

Question

对于这个问题的标题有些含糊，表示道歉！

我有以下JS代码，它查找具有特定来源的图像的img标签。然后替换img标签为span，以便我可以使用字体图标替换图像/图标。

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


        }

目前一切都很顺利，但还有一个问题我无法解决。

除了给 span 的 .iconfont 添加一个类之外，我还想为 span 添加两个更多的类 - 1）被替换的 img 元素的原始类，以及2）图像来源的名称，但不包括前面的 'folder/'。

所以，目前我有：

<img class = "tinyicon" src="******/t/edit">

我的脚本在DOM中创建了以下内容：

<span class = "iconfont">

但我希望我的脚本能够创建以下内容：

<span class = "iconfont tinyicon edit">

这就是我想要的 :) 感谢您查看！

- user1525612

Answer 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);
}

- adeneo

---

这个功能很好，除了它将整个img源代码添加为类名，而不仅仅是'folder/'后面的部分。 - user1525612

但是我已经用"%2F"替换了你的"/"，现在完美了，非常感谢！ - user1525612

Answer 2

改变这个：

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

转换为：

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

您的 addClass() 不起作用，因为 span 是 DOM 节点，而不是 jQuery 对象。

- jfriend00

Answer 3

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

- Arun P Johny

---

谢谢，这看起来很有前途，但是它添加的不是img源作为类，而是"folder，folder" - 也许你的正则表达式代码不太正确？ - user1525612