Поиск строк в HTML - PullRequest
Новая
       15

Поиск строк в HTML

0 голосов
/ 15 марта 2011

В Javascipt (или лучше в jQuery), как мне проверить, содержится ли данная строка в html-содержимом и (поиск ORed)?Пример: 

<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

Ответы [ 4 ]

1 голос
/ 15 марта 2011 
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/

0 голосов
/ 15 марта 2011

Это немного запутанная демонстрация, но: с учетом слегка адаптированного 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 это может дать возможность поиска на странице.

0 голосов
/ 15 марта 2011 
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
});

Обратите внимание, что в строке поиска используется |вместо места для разделения слов.Просто замените все пробелы, если это проблема.

0 голосов
/ 15 марта 2011 
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, чтобы сузить его. Первоначальный селектор будет иметь большое влияние на скорость этого, и вы также получите несколько совпадений, если есть вложенные элементы. Не зная ваших обстоятельств, трудно что-либо порекомендовать - просто будьте в курсе этих вещей. Надеюсь, это начало.

...