Question

在Javascipt（或更好的jQuery）中，如何检查给定字符串是否包含在＆lt; p＆gt; 和＆lt; span＆gt; （ORed搜索）？例如：

apple boy cat ant boy cow axe boots cat boots cow ant Search string: "apple boots cat" Output: p1, p3, sp1

Answer 1

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/

Answer 2

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缩小范围。初始选择器将对此速度产生很大影响，如果存在嵌套元素，您还将获得多个匹配。在不了解你的情况的情况下，很难推荐任何东西 - 只要注意这些事情。希望这是一个开始。

Answer 3

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

请注意，搜索字符串使用|而不是空格来分隔单词。如果这是一个问题，只需替换所有空格。

Answer 4

这是一个稍微复杂的演示，但是：给出了一个稍微适应的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，这可以提供页内搜索选项。

在html中搜索字符串

4 个答案: