Search strings in html

In Javascipt (or better in jQuery), how do I check if a given string is contained in an html content of a <p> and <span> (OR开发者_Python百科ed search)? Example:

<p id="p1">apple boy cat</p>
<p id="p2">ant boy cow</p>
<p id="p3">axe boots cat</p>
<span id="sp1">boots</span>
<span id="sp2">cow</span>
<span id="sp3">ant</span>

Search string: "apple boots cat"

Output:
p1, p3, sp1

---

var searchArray = 'apple boots cat'.split(' ');
var found = $('p, span').filter(function(idx, elem) {
    var html = $(elem).html();
    for(var i = 0, l = searchArray.length; i < l; i++) {
        if(html.indexOf(searchArray[i]) != -1) {
            return true;
        }
    }
    return false;
}).css('color', '#f00');

Demo: http://jsfiddle.net/ThiefMaster/sWd2t/

---

var phrases = "apple boots cat".split(/\s+/);
$("*").filter(function () {
    var found = false;
    var $this = $(this);
    $.each(phrases, function (phrase) {
        if ($this.text().search(phrase) !== -1) {
            found = true;
            return false; // break the `each`
        }
    });
    return found;
});

This is untested, but you get the idea. Select the elements which you want to search through and then use filter to narrow it down. The initial selector will have a large influence on the speed of this, and you'll also get multiple matches if there are nested elements. Without knowing your circumstances it's hard to recommend anything though - just be aware of these things. Hopefully this is a start.

---

var words = new RegExp("apple|boots|cat"); // looking for "apple", "boots" and "cat"
var output = $('p, span').filter(function() { // search "p" and "span"
  return words.test($(this).text()); 
}).map(function() {
  return $(this).attr('id'); // return the value of "id" from the found nodes
});

Note that the search string uses | instead of space to separate the words. Just do a replace on all the spaces if that's a problem.

---

This is a slightly convoluted demo, but: given a slightly adapted html:

<form action="#" method="post">
    <fieldset>
        <input placeholder="Search for string" type="search" id="search" name="search" />
    </fieldset>
</form>

<div id="results">0 results.</div>

<div id="wrap">
    <p id="p1">apple boy cat</p>
    <p id="p2">ant boy cow</p>
    <p id="p3">axe boots cat</p>
    <span id="sp1">boots</span>
    <span id="sp2">cow</span>
    <span id="sp3">ant</span>
</div>

And the jQuery:

$('#search').keypress(

function(k) {
    var string = $(this).val();
    $('.highlight').removeClass('highlight');
    $('#wrap').children().filter(':contains(' + string + ')').addClass('highlight');
    $('#results').text($('.highlight').length + ' results.');
    if (k.which === 13) {
        return false;
    }
});

JS Fiddle demo, this can give in-page searching options.