正则表达式以查找<a>包含指向特定文件类型的链接的标签</a>

Question

我正在尝试编写一个小的jQuery / javascript函数，该函数搜索页面上的所有链接，识别标记链接到的文件的类型，然后添加适当的类。 此任务的目的是根据链接另一端的文件类型来设置链接的样式。

到目前为止，我有这个：

$(document).ready(function(){
    $('#rt-mainbody a').each(function(){
        linkURL = $(this).attr('href');
        var match = linkURL.match("^.*\.(pdf|PDF)$");
        if(match != null){$(this).addClass('pdf');}
    });
});

摆弄我这个。

然后，我将继续这个概念来识别例如电子表格文件，Word文档，文本文件，jpg等。

它的确有效...但问题是，对于我来说，这太笨拙了，因为我将自己在SO和互联网周围发现的零星杂物完全捣碎了-我确信必须有一种更整洁，更高效，这样做更易读，但我不知道它可能是什么。 有人可以帮我吐口水吗？

理想情况下，该函数应检测（a）扩展名在href字符串的末尾，以及（b）扩展名前加一个点。

谢谢！ :)

编辑

哇！ 这样的回应！ ：） 多谢你们！

当我看到仅使用选择器的方法时，就有点烦人了-但是，我要为其构建此应用程序的最终用户正在链接到众多资源网站上的PDF（以及其他MIME），并且无法控制它们要链接到的文件名的大小写使用情况...使用选择器显然不是可行的选择，因为结果将是如此不一致。

编辑

而大奖得主是@Dave Stein！ ：d

我将采用的解决方案是“设置并保留它”脚本（ 让我烦恼 ），无论大小写如何，它都可以容纳任何扩展名，而我需要做的就是针对每种合理的可能情况调整CSS。

得知我已经非常接近最佳解决方案，这真是一件很高兴的事情……更多的是幸运，而不是通过XD的明智判断。

Answer 1

好吧，您不想使用regex来搜索字符串，所以我希望您将其范围缩小到仅链接。 我节省了$(this)所以您不必重复调用它。 我还更改了regex因此不区分大小写。 最后，我确保班级正在添加匹配项。 这样完成您想要的吗？

$(document).ready(function(){
    $('#rt-mainbody a').each(function(){
        var $link = $(this),
            linkURL = $link.attr('href'),
            // I can't remember offhand but I think some extensions have numbers too
            match = linkURL.match( /^.*\.([a-z0-9]+)$/i );

        if( match != null ){
          $link.addClass( match[1].toLowerCase() );
        }
    });
});

哦，我几乎忘记了，我确保linkURL不再是全局的。 :)

Answer 2

“属性以”结尾 ： 选择器 ：

$('#rt-mainbody a[href$=".pdf"], #rt-mainbody a[href$=".PDF"]').addClass('pdf')

编辑：或更笼统和灵活：

var types = {
  doc: ['doc', 'docx'],
  pdf: ['pdf'],
  // ...
};

function addLinkClasses(ancestor, types) {
  var $ancestor = $(ancestor);
  $.each(types, function(type, extensions) {
    selector = $.map(extensions, function(extension) {
        return 'a[href$=".' + extension + '"]';
      }).join(', ');
    $ancestor.find(selector).addClass(type);
  });
}

addLinkClasses('#rt-mainbody', types);

这是区分大小写的，因此建议您将服务器上的所有扩展名规范化为小写。

Answer 3

正则表达式应为/^.*\\.(pdf)$/i 。

Answer 4

使用此正则表达式（不带引号）：

/\.(pdf|doc)$/i

此正则表达式匹配（不区分大小写）以.pdf，.doc等结尾的任何内容。

对于动态类：

    var match = linkURL.match(/\.(pdf|doc)$/i);
    match = match ? match[1].toLowerCase() : null;
    if (match != null) {
        $(this).addClass(match);
    }

Answer 5

您可以在选择器中使用它（查找所有指向pdf文件的链接）

a[href$=".pdf"]

Answer 6

从@Amadan构建的另一个答案是：

var extensions = [
  'pdf',
  'jpg',
  'doc'
];

$.each( extensions, function( i, v) {
  $('#rt-mainbody').find( 'a[href$=".' + v + '"], a[href$=".' + v.toUpperCase() + '"]')
  .addClass( extension );
});

Answer 7

我会建议的onyl建议是，您可以更改匹配项以检查文件扩展名是什么，而不必为每个可能的文件扩展名进行不同的正则表达式搜索：

var linkURL = $(this).attr('href');  //<--you were accidentally declared linkURL as a global BTW.
var match = linkURL.match(/\.(.*)$/);
if(match != null){
   //we can extract the part between the parens in our regex
   var ext = match[1].toLowerCase() 
   switch(ext){
      case 'pdf': $(this).addClass('pdf'); break;
      case 'jpg': $(this).addClass('jpg'); break;
      //...
   }
}

如果您希望选择使用与文件扩展名不同的类名，则此switch语句最有用。 如果文件扩展名始终相同，则可以考虑将正则表达式更改为适合您所需的文件扩展名的文件

/\.(pdf|jpg|txt)$/i  //i for "case insensitive"

然后做

var ext = match[1].toLowerCase() 
$(this).addClass(ext);