搜索在HTML字符串

在javascipt的（或jQuery的更好），我该如何检查，如果给定的字符串包含在<p>和<跨度>（或运算搜索）的HTML内容？例如：搜索在HTML字符串

 
<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

来源

2011-03-15 Jairo

包含选择器可能会做你想做的。 http://api.jquery.com/contains-selector/ – 2011-03-15 14:20:46

jQuery是Javascript。 – 2011-03-15 14:25:50

@Tomalak，没错，是的;但jQuery允许对JavaScript的底层机制稍微不太严谨的理解。通常，比“香草JS”解决方案更容易“理解”。（请注意'理解'的引用） – 2011-03-15 14:48:02

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');

演示：http://jsfiddle.net/ThiefMaster/sWd2t/

来源

2011-03-15 14:28:15 ThiefMaster

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; 
});

这是未经测试，但你的想法。选择要搜索的元素，然后使用filter将其缩小。初始选择器对速度有很大的影响，如果有嵌套元素，你也会得到多个匹配。如果不知道你的情况，很难推荐任何东西 - 只要注意这些事情。希望这是一个开始。

来源

2011-03-15 14:23:28 nickf

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 
});

注意，搜索字符串使用|而不是用空格分开单词。如果这是一个问题，请在所有空间上进行更换。

来源

2011-03-15 14:29:35 Jakob

这是一个稍微令人费解的演示，但是：给出一个稍微适应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>

而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，这可以给网页搜索选项。

来源

2011-03-15 14:38:04

搜索在HTML字符串

回答

相关问题