搜索在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字符串

回答

相關問題