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

Fiddle me this.

然后我会继续使用这个概念来识别电子表格文件，Word文档，文本文件，jpgs等。

它有效...但问题是，对我而言，这是超级笨重的，因为我已经完全将它与我在SO和互联网上发现的几率和草皮一起捣蛋 - 我敢肯定必须有一个整洁的，更有效，更易读的方式，但我不知道它可能是什么。拜托，有人可以给我一个吐痰和抛光吗？

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

谢谢！：）

修改

哇！这样的回应！ :)谢谢你们！

当我看到使用简单选择器的方法时，它有点像facepalm时刻 - 但是我构建此应用程序的最终用户是在多个资源网站上链接到PDF（以及可能的其他MIME）并且没有控制它们将链接到的文件名的大小写使用情况......使用选择器显然不是可行的方法，因为结果会非常不一致。

修改

大奖给@Dave Stein !! ：d

我将采用的解决方案是“设置并保留”脚本（fiddle me that），无论如何都可以容纳任何扩展，我需要做的就是为每个合理的可能性调整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

"Attribute ends with" selector：

$('#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);

正则表达式找<a> tags containing links to specific file types</a>

7 个答案: