How can I find text in HTML with JQuery?

Question

Is there a way to perform a search some HTML and whenever it finds an occurrence of a regular expression, wrap it in a span?

For example:

<p>The rain in Spain stays mainly on the plain</p>

$('p').match('/ain/gi').each(function() {
  $(this).wrap('<span class="red"></span>');
});

I think contains() should work for you something like var foundin = $('p:contains("I am a simple string")');. see here http://stackoverflow.com/questions/926580/find-text-string-using-jquery — RN Kushwaha, Sep 15 '14 at 19:26

score 3 · Accepted Answer · answered Sep 15 '14 at 19:24

3

I'd strongly suggest the following, simpler, approach:

// selects the 'p' elements, and calls the 'html()' method:
$('p').html(function (i,h) {
    // uses the anonymous function, i is the index of the current element
    // from the collection, h is the found HTML of that element.
    return h.replace(/(ain)/gi, '<span class="red">$1</span>');
});

answered Sep 15 '14 at 19:24

David Thomas

249,100
51
377
410

1

If you lose the extra `)` (at the end of replace), this is a much cleaner version of my suggestion. Upvoting yours, deleting mine. – Paul Roub Sep 15 '14 at 19:26
True, there's only so many ways to approach the problem I guess (and thanks, edited!). – David Thomas Sep 15 '14 at 19:28

score 0 · Answer 2 · answered Sep 15 '14 at 19:20

0

You could use a regex replace:

$('p').html($('p').text().replace(/(ain)/gi, '<span class="red">$1</span>'));

http://jsfiddle.net/husgns7t/

answered Sep 15 '14 at 19:20

Tom Pietrosanti

4,184
2
24
29

Very true. I was only trying to demonstrate the replacement part given a single element selection, and didn't consider more than a single element selection. – Tom Pietrosanti Sep 16 '14 at 02:21

How can I find text in HTML with JQuery?

2 Answers2

Linked