Use jQuery .filter() to select specific text within div

Question

HTML:

<p class="greeting">
  hello, my name is kevin. what's yours?
</p>

jQuery:

$("p.greeting").filter(function (){
  return $this.text() === "my name is";
}).css("background", "green");

I'm trying to isolate the words "my name is" in the <p class="greeting"> tag. Can anyone help me with the jQuery as it doesn't seem to work. Thanks.

Possible duplicate of stackoverflow.com/questions/926580/… — Damon Bauer
– Damon Bauer, Commented Oct 31, 2011 at 20:02

Šime Vidas · Accepted Answer · 2011-10-31 20:26:29Z

8

Here you go:

CSS:

.highlight { background-color: yellow; }

JavaScript:

var text = 'My namE iS';

$( 'p.greeting' ).html( function ( i, html ) {
    var regexp, replacement;

    regexp = RegExp( '(' + text + ')', 'gi' );
    replacement = '<span class="highlight">$1</span>';

    return html.replace( regexp, replacement );
});

Live demo: http://jsfiddle.net/SGCDS/5/

edited Oct 31, 2011 at 20:26

answered Oct 31, 2011 at 20:09

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bruce Over a year ago

This looks good, although to completely meet the question's requirements, you should set some class on that <span> and then .css that class to "green" background.

pruett Over a year ago

awesome thanks! is there a straightforward way to have var text to be case-insensitive?

Šime Vidas Over a year ago

@Bruce Good advice. I already did that. I prefer the yellow background color. The OP can change it to green...

Bruce Over a year ago

for case-insensitive I'd go regex: /my name is (.*)/i

Šime Vidas Over a year ago

@pruett I've updated my answer with a new improved solution (based on regular expressions). The 'gi' flag ensures that the search is global and case-insensitive.

|

Tobias Golbs · Accepted Answer · 2011-10-31 20:04:54Z

1

You're function returns always false. Only if there is exactly "my name is" in your div, it will return true.

Try something like this:

return $(this).text().indexOf("my name is") != -1;

answered Oct 31, 2011 at 20:04

Tobias Golbs

4,6164 gold badges31 silver badges50 bronze badges

2 Comments

pruett Over a year ago

hmm...doesn't seem to work. is the -1 a nodeType? i'm not familiar with this

Bruce Over a year ago

I believe the claim is that if text() doesn't contain the sub-string "my name is" then .indexOf() will return -1.

Collectives™ on Stack Overflow

Use jQuery .filter() to select specific text within div

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related