在 html 中搜索字符串答案

【问题标题】：Search strings in html在 html 中搜索字符串
【发布时间】：2011-03-15 14:17:51
【问题描述】：

在 Javascipt 中（或者在 jQuery 中更好），如何检查给定字符串是否包含在

和的 html 内容中（ ORed 搜索）？示例：

苹果男孩猫

蚁童牛

斧靴猫

靴子牛蚂蚁搜索字符串：“苹果靴猫” 输出： p1, p3, sp1

【问题讨论】：

包含选择器可能会做你想做的事。 api.jquery.com/contains-selector
@Tomalak，没错，是的；但是 jQuery 允许对 JavaScript 的底层机制稍微不那么严格的理解。并且通常比普通的 JS 解决方案更容易“理解”。（请注意“理解”中的引号）

标签： javascript jquery string search

【解决方案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/

【讨论】：

【解决方案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 缩小范围。初始选择器会对这个速度产生很大影响，如果有嵌套元素，你也会得到多个匹配项。在不了解您的情况的情况下，很难推荐任何东西 - 请注意这些事情。希望这是一个开始。

【讨论】：

【解决方案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
});

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

【讨论】：

【解决方案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，这可以提供页内搜索选项。

【讨论】：