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.
精彩评论