按文字选择链接(完全匹配)


89

使用jQuery,我想选择一个完全包含某种文本的链接。例如:

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

我已经试过了:

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

但是它选择了第一个和第二个链接。我只想要第一个链接,其中确切包含“这个”。我怎样才能做到这一点?


Answers:


138

你可以这样做:

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

参考:http//api.jquery.com/filter/


5
在这种情况下都可以使用,但是我倾向于使用===,因为它在值和类型上都匹配,即不会强制类型。stackoverflow.com/questions/359494/...
FishBasketGordo

1
你错过了return。我必须将其更改为function(index) { return (this.text === 'This One') }
Endy Tjahjono,2011年

此外,您可以检查文本长度。
bestinamir

39

我的一位同事扩展了jQuery,并提供了执行此功能的功能:

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

结果是您可以通过以下方式通过精确的文本选择内容:

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

这使操作变得容易,因为您不必每次都记住确切的语法。他的整个帖子在这里: jQuery Custom Selector,用于通过精确文本选择元素:textEquals


28

扩展FishBasketGordo的答案。如果您要在大量元素上进行选择,:contains()请先使用缩小范围,然后应用过滤器。

这样可以提高整体速度:

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

为速度/效率投票。另外,避免在.filter(..)内需要$ .trim()空间。
JoePC

8

必须将Nariman的解决方案修改为:

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

否则无法在Chrome(Linux)上使用


6

我正在使用扩展程序

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

只是想分享,以防其他人碰到这个(,


3

因此,Narnian的答案非常有效。但是,在野外使用它时,我遇到了一些问题,在这些问题中,我本来希望找到的东西没有找到。这是因为有时元素的文本周围会有随机的空白。我相信,如果您要搜索“ 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;
}

次要注释...修剪只删除搜索到的文本前后的空格。它不会删除单词中间的空格。我相信这是理想的行为,但是您可以根据需要更改它。


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

我觉得我缺少了基于其他人对过滤器的回答的东西,但是为什么不选择从“包含”返回的元素数组中的第一项呢?

仅当您知道第一个链接与您要查找的完全匹配时,此方法才有效。如果不确定链接的顺序,其他答案会更好。


因为他并不总是知道他想要的是第一个
Cameron

该问题专门询问“我只想要第一个链接”。
Michael Khalili

问题要求精确匹配,作者指出第一个要解释哪个元素想要的元素。
dlopezgonzalez '17

2

如何从下拉菜单中获取所选值:

$.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")); -它将返回下拉菜单的值


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

1
请在回答中添加解释。
米哈尔Perłakowski

第一行选择带有该文本的任何链接,第二行和第三行如何使用该链接隐藏或禁用该链接,请参见jquery文档api.jquery.com/filter中的filter
David Fawzy

@DavidFawzy-抱歉,嗯...什么?我认为第二行或第三行与OP的问题无关-它只会增加混乱。
jbyrd

2

抱歉,如果这完全符合上面任何人的回答,

   $.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()
         }
      })
   }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.