28

I'm trying to change any elements containing a particular text string to a red color. In my example I can get the child elements to become blue, but there's something about the way I've written the 'Replace Me' line that is incorrect; the red color change doesn't happen. I note that the "contains" method is usually written as :contains but I couldn't get that to validate with $(this).

$('#main-content-panel .entry').each(function() {
       $(this).css('color', 'blue');      
});         

$('#main-content-panel .entry').each(function() {
   if($(this).contains("Replace Me").length > 0) {
        $(this).css('color', 'red'); 
    }      
});

Fiddle: http://jsfiddle.net/zatHH/

0

4 Answers 4

87

:contains is a selector. To check if a selector applies to given variable, you can use is:

if($(this).is(':contains("Replace Me")')) 

However Vega's solution is cleaner in this case.

3
  • 1
    This is perfect for conditional statement processing. Thanks
    – klewis
    Commented Feb 23, 2015 at 21:17
  • Works splendidly when using a jquery variable, such as $bodyText = $('div.bodyText ul li p'); Then it can be use as if($bodyText.is(':contains("some text")')) . Appreciate it.
    – j4v1
    Commented Jul 20, 2015 at 2:52
  • 4
    I needed this, but when I read If this is contains, it sounds like the stupidest English possible :)
    – lharby
    Commented Dec 12, 2017 at 13:20
18

I don't think there is a .contains function in jQuery. There is a .contains function but that function is used to see if a DOM element is a descendant of another DOM element. See documentation for .contains. (Credits to @beezir)

I think you are looking for :contains selector. See below for more details,

$('#main-content-panel .entry:contains("Replace Me")').css('color', 'red');

http://jsfiddle.net/zatHH/1/

0
15

you can use match to find the text inside the particular element

$('#main-content-panel .entry').each(function() {
    $(this).css('color', 'blue');      
});			

$('#main-content-panel .entry').each(function() {
    if($(this).text().match('Replace Me')) {
        $(this).css('color', 'red'); 
    }      
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-content-panel">
    <div class="entry">ABC</div>
    <div class="entry">ABC Replace Me</div>
    <div class="entry">ABC</div>
    <div class="entry">ABC Replace Me</div>
</div>

2
  • This helped me. Similar to VB.net ".contains()" Commented Mar 20, 2015 at 15:36
  • Works but case insensitive Commented Jan 26, 2017 at 8:17
7

I think we should convert our text to lower case. It is better to check with lowercase and uppercase.

$('#main-content-panel .entry').each(function() {
    var ourText = $(this).text().toLowerCase(); // convert text to Lowercase
    if(ourText.match('replace me')) {
        $(this).css('color', 'red'); 
    }      
});
1
  • Just what I needed. Was trying to get match work earlier with a variable, and this helped me out. thank you.
    – lharby
    Commented Oct 12, 2016 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.