通過文本選擇鏈接（完全匹配）

Question

使用jQuery，我想選擇一個包含完全某種文本的鏈接。例如：

<p><a>This One</a></p> 
<p><a>"This One?"</a></p> 
<p><a>Unlikely</a></p> 

我已經試過這樣：

$('a:contains("This One")') 

但挑選第一和第二個鏈接。我只想要第一個包含「This One」的鏈接。我怎樣才能做到這一點？

Answer 1

你可以這樣做：

$('a').filter(function(index) { return $(this).text() === "This One"; }); 

參考：http://api.jquery.com/filter/

Answer 2

我的一位同事擴展jQuery的一個函數來做到這一點：

$.expr[':'].textEquals = function(a, i, m) { 
    return $(a).text().match("^" + m[3] + "$"); 
}; 

的結果是，你可以選擇這種方式的確切文字：

$("label:textEquals('Exact Text to Match')"); 

這使得它很容易，因爲你不必每次都記住確切的語法。他的整個帖子是在這裏：jQuery Custom Selector for selecting elements by exact text :textEquals

Answer 3

我用的是分機

$.expr[':'].textEquals 

但我發現，實現不再使用jQuery 1.7（顯然是在Sizzla.filter的變化）的作品。經過一段時間的努力後，我只是寫了一個jQuery插件來完成相同的工作。

$.fn.textEquals = function (text) { 
    var match = false; 
    $(this).each(function() { 
     if ($(this).text().match("^" + escapeRegex(text) + "$")) { 
      match = true; 
      return false; 
     } 
    }); 
    return match; 
}; 

用途：

$(".ui-autocomplete li").textEquals('Exact Text to Match'); 

只是想分享，萬一別人運行到這個（，

Answer 4

不得不修改納裏曼的解決方案是：

$.expr[':'].textEquals = function(a, i, m) { 
    var match = $(a).text().match("^" + m[3] + "$") 
    return match && match.length > 0;                                                            
} 

否則沒有在Chrome上運行（Linux）

Answer 5

如何從一個下拉式DWON獲得所選值：

$.fn.textEquals = function (text) { 
    var match = false; 
    var values=""; 
    $(this).each(function() { 
     if ($(this).text().match("^" + text + "$")) { 
      values=$(this).val(); 
      match = true; 
      return false; 
     } 
    }); 
    return values; 
}; 

console.log($("option").textEquals("Option One")); - 它會返回下拉

Answer 6

的價值要擴大FishBasketGordo的答案。如果您嘗試在大量元素上進行選擇，請先使用:contains()縮小範圍，然後應用過濾器。

這將提高整體速度：

$('a:contains("This One")').filter(function(index) 
{ 
    return $(this).text() === "This One"; 
}); 

Answer 7

所以納尼亞的回答非常有效。然而，在野外使用它，我遇到了一些問題，我預計會發現的事情沒有找到。這是因爲有時在元素的文本週圍會出現隨機的空白區域。我相信，如果你正在尋找「Hello World」，你仍然希望它匹配「Hello World」，甚至是「Hello World \ n」。因此，我只是將「trim（）」方法添加到該函數中，該函數移除了周圍的空白，並且它開始工作得更好。另外，我修改了變量名，使其更加清晰。

具體...

$.expr[':'].textEquals = function(el, i, m) { 
    var searchText = m[3]; 
    var match = $(el).text().trim().match("^" + searchText + "$") 
    return match && match.length > 0; 
} 

和二級音符......前後搜索文本後修剪不僅能消除空白。它不會刪除單詞中間的空格。我相信這是可取的行爲，但如果你願意，你可以改變。

Answer 8

var link = $('a').filter(function(index) { return $(this).text() === "Availability"; }); 
$(link).hide(); 
     $(link).removeAttr('href'); 

Answer 9

$('a:contains("This One")')[0]; 

我覺得我失去了基於別人的答案，過濾的東西，但爲什麼不直接選擇元素的數組，通過真實「包含」內返回的第一個項目？

只有當您知道第一個鏈接具有您正在查找的完全匹配時，此方法纔有效。其他答案更好地工作，如果你不知道哪個訂購鏈接將被英寸

Answer 10

對不起，如果上述任何人的回答，完全匹配

$.fn.equalsText = function (text, isCaseSensitive) { 
     return $(this).filter(function() { 
     if (isCaseSensitive) { 
      return $(this).text() === text 
     } else { 
      return $(this).text().toLowerCase() === text.toLowerCase() 
     } 
     }) 
    } 

這是在LinkedIn搜索結果頁面的一些輸出安慰。

$("li").equalsText("Next >", false) 
[<li class=​"next">​…​</li>​] // Output 

$("li").equalsText("next >", false) 
[<li class=​"next">​…​</li>​] // Output 

$("li").equalsText("Next >", true) 
[<li class=​"next">​…​</li>​] // Output 

$("li").equalsText("next >", true) 
[] // Output 

它有區分大小寫的支持，以及，也沒有使用:contains()

編輯（2017年5月22日）： -

$.fn.equalsText = function (textOrRegex, isCaseSensitive) { 
     return $(this).filter(function() { 
     var val = $(this).text() || this.nodeValue 
     if (textOrRegex instanceof RegExp) { 
      return textOrRegex.test(val) 
     } else if (isCaseSensitive) { 
      return val === textOrRegex 
     } else { 
      return val.toLowerCase() === textOrRegex.toLowerCase() 
     } 
     }) 
    }