Select link by text (exact match)

Question

Using jQuery, I want to select a link that contains exactly some kind of text. For example:

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

I have tried this:

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

But it picks the first AND the second link. I just want the first link, which contains exactly "This One". How can I do that?

Answer 1

To expand on FishBasketGordo's answer. If you are trying to make the selection on a large amount of elements, use :contains() first to narrow down and then apply the filter.

This will improve the overall speed:

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

Answer 2

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

I feel like I'm missing something based on everyone else's answer to filter but why not just select the first item within the array of elements that's returned by 'contains'?

This works, only if you know that the first link has the exact match you're looking for. Other answers work better, if you're not sure which order the links will be in.

Answer 3

had to modify Nariman's solution to be:

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

Otherwise didn't work on chrome (Linux)

Answer 4

I was using the extension

$.expr[':'].textEquals

But I have found that the implementation no longer works with jQuery 1.7 (apparently a change in Sizzla.filter). After struggling for some time to make it work I have simply written a jQuery plugin to accomplish the same.

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

Use:

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

Just wanted to share, in case someone else runs into this (,

Answer 5

Sorry, if this exactly matches anybody's answer above,

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

Here is some output in the Linkedin search result page console.

$("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

It has case sensitivity support as well and is not using :contains()

Edit (May 22, 2017) :-

   $.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()
         }
      })
   }

Answer 6

You can do this:

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

Reference: http://api.jquery.com/filter/