簡體   English   中英

正則表達式以查找<a>包含指向特定文件類型的鏈接的標簽</a>

[英]Regex to find <a> tags containing links to specific file types

我正在嘗試編寫一個小的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的明智判斷。

好吧,您不想使用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不再是全局的。 :)

“屬性以”結尾選擇器

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

這是區分大小寫的,因此建議您將服務器上的所有擴展名規范化為小寫。

正則表達式應為/^.*\\.(pdf)$/i

使用此正則表達式(不帶引號):

/\.(pdf|doc)$/i

此正則表達式匹配(不區分大小寫)以.pdf,.doc等結尾的任何內容。

對於動態類:

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

您可以在選擇器中使用它(查找所有指向pdf文件的鏈接)

a[href$=".pdf"]

從@Amadan構建的另一個答案是:

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

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

我會建議的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);

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM