Select element by exact match of its content

jquery jquery-selectors
julian picture julian · Mar 12, 2013 · Viewed 109.3k times · Source

All right, I wonder if there is a way to make the :contains() jQuery's selector to select elements with only the string that is typed in

for example -

<p>hello</p>
<p>hello world</p>

$('p:contains("hello")').css('font-weight', 'bold');

The selector will select both p elements and make them bold, but I want it to select only the first one.

Answer

T.J. Crowder picture T.J. Crowder · Mar 12, 2013

No, there's no jQuery (or CSS) selector that does that.

You can readily use filter:

$("p").filter(function() {
    return $(this).text() === "hello";
}).css("font-weight", "bold");

It's not a selector, but it does the job. :-)

If you want to handle whitespace before or after the "hello", you might throw a $.trim in there:

return $.trim($(this).text()) === "hello";

For the premature optimizers out there, if you don't care that it doesn't match <p><span>hello</span></p> and similar, you can avoid the calls to $ and text by using innerHTML directly:

return this.innerHTML === "hello";

...but you'd have to have a lot of paragraphs for it to matter, so many that you'd probably have other issues first. :-)

Related questions

Set select option 'selected', by value

I have a select field with some options in it. Now I need to select one of those options with jQuery. But how can I do that when I only know the value of the option that must be selected? …

Read More
Get the value in an input text box

What are the ways to get and render an input value using jQuery? Here is one:

Read More
How can I know which radio button is selected via jQuery?

I have two radio buttons and want to post the value of the selected one. How can I get the value with jQuery? I can get all of them like this: $("form :radio") How do I know which one is …

Read More