jQuery：将文件类型类添加到任何文件类型的链接答案

【问题标题】：jQuery: Add file type class to links for ANY file typejQuery：将文件类型类添加到任何文件类型的链接
【发布时间】：2012-11-12 00:16:02
【问题描述】：

$("a[href $='.pdf']" ).addClass("linkIconPDF");
$("a[href *='.pdf#']").addClass("linkIconPDF");
$("a[href *='.pdf;']").addClass("linkIconPDF");
$("a[href *='.pdf?']").addClass("linkIconPDF");

$("a[href $='.txt']" ).addClass("linkIconTXT");
$("a[href *='.txt#']").addClass("linkIconTXT");
$("a[href *='.txt;']").addClass("linkIconTXT");
$("a[href *='.txt?']").addClass("linkIconTXT");

到目前为止一切顺利，但如何简化以匹配任何文件类型？

是否可以进行一些正则表达式分组以匹配所有可能的文件类型？

$("a[href $='.([a-zA-Z0-9]{2,4})']" ).addClass("linkIcon$1");

测试脚本：http://jsfiddle.net/k2jqn/

【问题讨论】：

以分号结尾的网址似乎不太可能？

标签： javascript jquery regex

【解决方案1】：

$("a").each(function(){
    var match = this.href.match(/\.([a-zA-Z0-9]{2,4})([#;?]|$)/);
    if(match){
        $(this).addClass("linkIcon" + match[1]);
    }
});

演示：http://jsfiddle.net/k2jqn/4/

【讨论】：

@ZoltanToth 您需要存储反向引用并正确添加它，但该方法成立。我会编辑答案
@Martin 我刚刚补充说，对于在 Firefox 中进行调试，它实际上与您想要实现的目标没有任何关系。我已经从答案中删除了它。
@Martin 这是一个没有console.log jsfiddle.net/k2jqn/5的演示
我想通了。该死的 IE8 让我发疯了。它违反了我的 CSS 规则，因为它不喜欢 .linkIcons a[href $=".pdf"], #inhalt:not(.keineLinkIconsInListen) li a[href $=".pdf"], .linkIcons a[href *=".pdf#"], #inhalt:not(.keineLinkIconsInListen) li a[href *=".pdf#"], .linkIcons a[href *=".pdf;"], #inhalt:not(.keineLinkIconsInListen) li a[href *=".pdf;"], .linkIcons a[href *=".pdf?"], #inhalt:not(.keineLinkIconsInListen) li a[href *=".pdf?"] 这样的属性选择器，再次感谢！
@AsadSaeeduddin 为什么[#;?] 中有分号？

【解决方案2】：

您可以简单地使用通配符选择器：

$("a[href*='.pdf']" ).addClass("linkIconPDF");
$("a[href*='.txt']" ).addClass("linkIconTXT");

它以通配符的方式选择链接。

【讨论】：

这不够安全，不太可能但可能 example.com/foo.pdfiscool

【解决方案3】：

为什么不试试这个

$("a[href $='.$']" ).addClass("linkIconANYFILE");

【讨论】：

【解决方案4】：

带有 each 函数的数组会比使用正则表达式选择器更好吗？

var fileTypes = new Array("a[href $='.pdf']","a[href *='.pdf#']");
fileTypes.each(function(index,val){
    $(val).addClass('LinkIconPDF');
});

【讨论】：