0

我正在尝试编写一个小的 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 更多的是靠运气而不是良好的判断力

4

7 回答 7

2

好吧，您不想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不再是全球性的。:)

于 2013-09-03T02:14:47.933 回答
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);

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

于 2013-09-03T02:16:57.623 回答
0

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

于 2013-09-03T02:15:10.860 回答
0

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

/\.(pdf|doc)$/i

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

对于动态类：

    var match = linkURL.match(/\.(pdf|doc)$/i);
    match = match ? match[1].toLowerCase() : null;
    if (match != null) {
        $(this).addClass(match);
    }
于 2013-09-03T02:17:30.570 回答
0

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

a[href$=".pdf"]
于 2013-09-03T02:19:41.637 回答
0

另一个基于@Amadan 的答案是：

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

$.each( extensions, function( i, v) {
  $('#rt-mainbody').find( 'a[href$=".' + v + '"], a[href$=".' + v.toUpperCase() + '"]')
  .addClass( extension );
});
于 2013-09-03T02:27:23.297 回答
0

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

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);
于 2013-09-03T02:31:53.003 回答