[英]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.