jQuery - Find Label By The Inner Text

Question

I was wondering if it was possible to find a label (or any element, really) by it's inner text. For example:

<label for="myCheckbox">SuperSweetCheckbox</label>

And I want to find it by the text SuperSweetCheckbox.

I know this seems kind of counter-intuitive, but due to the nature of the app I'm working on it seems to be necessary. I realize that I can iterate through each of the labels but I'd prefer to avoid that option if at all possible.

If anyone could provide some assistance, I'd appreciate it.

score 71 · Accepted Answer · answered Apr 24 '11 at 18:04

use the selector :contains()

 var element = $("label:contains('SuperSweetCheckbox')");

The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as bare words or surrounded by quotation marks. The text must have matching case to be selected.

score 5 · Answer 2 · answered Apr 24 '11 at 18:07

5

Maybe

$('label[value|="SuperSweetCheckbox"]')

according to:

http://api.jquery.com/attribute-contains-prefix-selector/

or

$("label:contains('SuperSweet')")

according to

http://api.jquery.com/contains-selector/

answered Apr 24 '11 at 18:07

Vicente Plata

3,370
1
19
26

The first one won't work. The `label` element has no attribute `value`. – Felix Kling Apr 24 '11 at 18:11
@Felix but it's the value of the element according to DOM. – Vicente Plata Apr 24 '11 at 18:13
1

It is not. If I inspect the element, then there is no `value` attribute. But convince yourself: http://jsfiddle.net/fkling/xd8Pf/ `value` is a well defined attribute. The inner text of elements is *not* the value of those elements. – Felix Kling Apr 24 '11 at 18:16

score 3 · Answer 3 · edited May 23 '17 at 10:29

This builds on Caspar's answer, but was too big for comments.

I thought it could be useful for others.

I used Caspar's solution but found that an empty string "" is considered to exist in any string, see:

https://stackoverflow.com/a/18399216/1063287.

In my situation SuperSweetCheckbox is a dynamic value and sometimes an empty string, in which case I don't want any matching logic to occur.

Creating a pseudo function using match() seems to work, see:

https://stackoverflow.com/a/18462522/1063287.

You can also use filter(), see:

https://stackoverflow.com/a/15364327/1063287).

Below is an example of the three variants - :contains(), filter() and a custom function:

jsFiddle

jsFiddle link

jQuery

var myString = "Test";

//var myString = "";

// 01.  :contains() - matches empty string as well
$("ul li > label:contains(" + myString + ")").closest("li").addClass("matched").siblings("li").addClass("notmatched");

// 02.  filter()
$("ul li > label").filter(function() {
    return $(this).text() === myString;
}).closest("li").addClass("matched").siblings("li").addClass("notmatched");

// 03.  custom function
$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

$("ul li > label:textEquals(" + myString + ")").closest("li").addClass("matched").siblings("li").addClass("notmatched");

HTML

<ul>
<li>
<label>Test</label>
</li>
<li>Oh Nu</li>
</ul>

CSS

.matched {
background: yellow
}

.notmatched {
background: aqua;
}

score 1 · Answer 4 · answered Apr 24 '11 at 18:06

1

I think the :contains() selector is what you are looking for. Check samples here > http://api.jquery.com/contains-selector/

answered Apr 24 '11 at 18:06

morgar

2,339
17
16

Unfortunately this selector chooses text that can be a substring of the actual value you are looking for. Example value you are looking for: test, Value in label: this is a test. This means that it will choose values that you dont need. I havent found a way around it unfortunately. – Kalvin Klien Mar 30 '20 at 17:15

score -3 · Answer 5 · edited May 04 '11 at 07:25

-3

All the Above specified is very exclusive, but try out this too, if its not working let me know.

VAR $YesitHas=$("lable").innerText("SuperSweetCheckBox");

edited May 04 '11 at 07:25

kapa

77,694
21
158
175

answered Apr 26 '11 at 05:19

Annamacharya

1
1
2

jQuery - Find Label By The Inner Text

5 Answers5

Linked