How to find elements with an exact text content?

[Nicolas Hoizey]

Hi,

I'm currently using :contains() to find elements that contain some  
string:

<http://docs.jquery.com/DOM/Traversing#contains.28_str_.29>

I would like now to find only elements that have a text content  
exactly equal to the string I chose.

I didn't find any simple solution in the list archives or in any  
documentation.

Thanks.


-Nicolas

--
Nicolas "Brush" HOIZEY
Clever Age   : http://www.clever-age.com/
Gastero Prod : http://www.gasteroprod.com/
Photos : http://www.flickr.com/gp/38608514@N00/M1c002

[Karl Swedberg-2]

Hi there Nicolas,

You can try the powerful .filter() method with an anonymous function as its argument:

$('someElement').filter(function() {

  return $(this).text() == 'Some text';

});

I'm pretty sure that will get what you're looking for.

--Karl

_________________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Jul 3, 2007, at 8:14 AM, Nicolas Hoizey wrote:

Hi,

I'm currently using :contains() to find elements that contain some  

string:

<http://docs.jquery.com/DOM/Traversing#contains.28_str_.29>

I would like now to find only elements that have a text content  

exactly equal to the string I chose.

I didn't find any simple solution in the list archives or in any  

documentation.

Thanks.

-Nicolas

-- 

Nicolas "Brush" HOIZEY

Clever Age   : http://www.clever-age.com/

Gastero Prod : http://www.gasteroprod.com/

Photos : http://www.flickr.com/gp/38608514@N00/M1c002

[Nicolas Hoizey]

Hi Karl,

> You can try the powerful .filter() method with an anonymous  
> function as its argument:
>
> $('someElement').filter(function() {
>   return $(this).text() == 'Some text';
> });

I will try this, thanks!

What is the difference between .text() and .textContent?


-Nicolas

--
Nicolas "Brush" HOIZEY
Clever Age   : http://www.clever-age.com/
Gastero Prod : http://www.gasteroprod.com/
Photos : http://www.flickr.com/gp/38608514@N00/M1c002

[Nicolas Hoizey]

>> You can try the powerful .filter() method with an anonymous
>> function as its argument:
>>
>> $('someElement').filter(function() {
>>   return $(this).text() == 'Some text';
>> });
>
> I will try this, thanks!

It works well!

Do you think it is usefull, for performance, to first filter  
with :contains() before using .filter()?

         $('#indirectly > ol > li > a:contains(' + related +  
')').filter(function() {
                 return ($(this)[0].textContent == related);
             }).parent().show('slow');

vs

         $('#indirectly > ol > li > a').filter(function() {
                 return ($(this)[0].textContent == related);
             }).parent().show('slow');

("related" comes from previous code)


I tried to profile both with Firebug, with not much difference, but I  
don't have a lot of data to parse yet.




-Nicolas

--
Nicolas "Brush" HOIZEY
Clever Age   : http://www.clever-age.com/
Gastero Prod : http://www.gasteroprod.com/
Photos : http://www.flickr.com/gp/38608514@N00/M1c002

[Karl Swedberg-2]

Hi Nicolas,

As far as I know, .textContent only works in Firefox. The IE equivalent is .innerText.

jQuery normalizes this with its .text() method. 

btw, .text() can also be used as a "setter": $(someElement).text('This is some text');

--Karl

_________________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Jul 3, 2007, at 10:17 AM, Nicolas Hoizey wrote:

Hi Karl,

You can try the powerful .filter() method with an anonymous  

function as its argument:

$('someElement').filter(function() {

  return $(this).text() == 'Some text';

});

I will try this, thanks!

What is the difference between .text() and .textContent?

-Nicolas

-- 

Nicolas "Brush" HOIZEY

Clever Age   : http://www.clever-age.com/

Gastero Prod : http://www.gasteroprod.com/

Photos : http://www.flickr.com/gp/38608514@N00/M1c002

[Nicolas Hoizey]

> As far as I know, .textContent only works in Firefox. The IE  
> equivalent is .innerText.
> jQuery normalizes this with its .text() method.

Thanks a lot!


-Nicolas

--
Nicolas "Brush" HOIZEY
Clever Age   : http://www.clever-age.com/
Gastero Prod : http://www.gasteroprod.com/
Photos : http://www.flickr.com/gp/38608514@N00/M1c002

[Nicolas Hoizey]

> You can try the powerful .filter() method with an anonymous  
> function as its argument:
>
> $('someElement').filter(function() {
>   return $(this).text() == 'Some text';
> });

It works well, but wouldn't it be very useful (and very "write less,  
do more") to have such a feature:

$('someElement:contains(^Some text$)')

Notice the '^' and '$' delimiters.


-Nicolas

--
Nicolas "Brush" HOIZEY
Clever Age   : http://www.clever-age.com/
Gastero Prod : http://www.gasteroprod.com/
Photos : http://www.flickr.com/gp/38608514@N00/M1c002

[Renato Formato]

Nicolas Hoizey ha scritto:

> Hi,
>
> I'm currently using :contains() to find elements that contain some  
> string:
>
> <http://docs.jquery.com/DOM/Traversing#contains.28_str_.29>
>
> I would like now to find only elements that have a text content  
> exactly equal to the string I chose.
>
> I didn't find any simple solution in the list archives or in any  
> documentation.
>
> Thanks.
>
>
> -Nicolas
>

Hi,
you can create a new selector to match text content with regular
expressions:

jQuery.expr[":"].containsRegEx =
"(a.textContent||a.innerText||'').match(eval('/'+m[3]+'/'))!=null";

and

$('a:containsRegEx(^my text$)')

It's a very simple code that does not escape the special regex characters.

I hope it helps

Ciao
Renato

[Nicolas Hoizey]

Hello Renato,

I also saw your answer on the french list... ;-)

>> I'm currently using :contains() to find elements that contain  
>> some  string:
>> <http://docs.jquery.com/DOM/Traversing#contains.28_str_.29>
>> I would like now to find only elements that have a text content  
>> exactly equal to the string I chose.
>> I didn't find any simple solution in the list archives or in any  
>> documentation.
>
> you can create a new selector to match text content with regular  
> expressions:
>
> jQuery.expr[":"].containsRegEx =
> "(a.textContent||a.innerText||'').match(eval('/'+m[3]+'/'))!=null";
>
> and
>
> $('a:containsRegEx(^my text$)')

I did something similar but dedicated to my issue:

jQuery.extend(jQuery.expr[':'], {
     containsExactly: "$(a).text() == m[3]"
});

And then: $('someElement:containsExactly(someText)')

Works really well, thanks!

By the way, I found examples of such selectors extensions, but no  
documentation at all... :-(


-Nicolas

--
Nicolas "Brush" HOIZEY
Clever Age   : http://www.clever-age.com/
Gastero Prod : http://www.gasteroprod.com/
Photos : http://www.flickr.com/gp/38608514@N00/M1c002

[jenson.joseph]

Thanks ! it was helpful for me