查看div是否包含一個或多個輸入的單詞（Javascript）

我想檢查是否有任何div包含輸入字段中輸入的所有單詞。然而，目前我陷入了一種情況，即一旦輸入空格，它就會從頭開始，因此類似OR運算符而不是AND運算符。任何人都可以把我推向正確的方向嗎？非常感謝！查看div是否包含一個或多個輸入的單詞（Javascript）

這是我到目前爲止有：

<div class="search">aa ab ac ad</div> 
<div class="search">ab ba bb bc</div> 
<div class="search">bb cc dd ee</div> 

<script> 
function search(query) { 
var divs= document.getElementsByTagName('div'); 
var words = query.toLowerCase().split(" "); 

for (var h = 0, len = divs.length; h < len; ++h) { 
    for (var i = 0; i < words.length; i++) { 

    if (divs[h].innerHTML.indexOf(words[i]) == -1) { 
    divs[h].style.backgroundColor = '#fff'; 
    } 
    else { 
    divs[h].style.backgroundColor = '#ddd'; 
    } 

    } 
} 

} 
</script> 

<input type="text" onkeyup="search(this.value);">

顯然，我也不是很清楚。我很抱歉。

我需要什麼方向去使它在Javascript中，以便它查找div是否包含AND字[0]和字[1]和字[2]等（因此，以任何隨機順序）？

現在，當發生分割時，函數將從頭開始。

來源

2013-02-12 Toine Lille

我肯定會考慮使用正則表達式這一點，似乎更爲合適。 – elclanrs 2013-02-12 00:44:58

在'divs [h] .style.backgroundColor ='#fff'後面加上'break'，這樣一旦發現一個單詞缺失，它就會設置顏色並移動到下一個div。 – 2013-02-12 00:45:32

...你也可以在內部循環之後放置'divs [h] .style.backgroundColor ='#ddd';'。每次匹配單詞時都不需要設置樣式。但是，你需要使用標籤「繼續」外層循環，而不是打破內層循環。 – 2013-02-12 00:47:17

還需要檢查每個查詢詞的長度：

<div class="search">aa ab ac ad</div> 
<div class="search">ab ba bb bc</div> 
<div class="search">bb cc dd ee</div> 

<script> 
function search(query) { 
var divs= document.getElementsByTagName('div'); 
var words = query.toLowerCase().split(" "); 

for (var h = 0, len = divs.length; h < len; ++h) { 
    for (var i = 0; i < words.length; i++) { 

    if (words[i].length > 0 && divs[h].innerHTML.indexOf(words[i]) >= 0) { 
    divs[h].style.backgroundColor = '#ddd'; 
    break; 
    } 
    else { 
    divs[h].style.backgroundColor = '#fff'; 
    } 
    } 
} 
} 
</script> 

<input type="text" onkeyup="search(this.value);">

來源

2013-02-12 00:58:30 cwills

謝謝！但是現在我怎樣才能使它工作，以便如果我搜索一個div包含的任何兩個，三個，四個單詞（以任何順序），它會突出顯示一個單詞，並且在每個單詞後都不會重新開始。 – 2013-02-12 08:01:14

盡我的代碼：

HMTL：

<div class="search"> 
    <div>aa cC abcc ac ad</div> 
    <div>ab ba bb bcc</div> 
    <div>bb cc dd ee cc</div> 
</div> 

<span>Search: </span><input type="text">

CSS：

div{ 
    border:solid 1px #1e2a29; 
    margin-bottom:10px; 
    padding:5px; 
    width:auto; 
} 

.matched{ 
    background-color:#f8dda9; 
    border:1px solid #edd19b; 
    margin:-1px; 
    border-radius:2px; 
} 

input[type="text"]{ 
    margin-left:10px; 
}

的Javascript：

$(document).ready(function(){ 
$('.search > div ').each(function(i, el){ 
    $(this).data('originalText', $(this).html()); 
}); 

$('input').keyup(function(e){ 
    var _val = $(this).val(); 
    var _span = '<span class="matched" >$1</span>'; 
    $('.search div ').each(function(i, el){    
      var _originalVal = $(el).data('originalText'); 
      var re = new RegExp('('+_val+')', "ig"); 
      if(_val.length > 1 && re.test(_originalVal) >=0 ){      
       $(el).html(_originalVal.replace(re, _span));      
      }else{ 
       $(el).html(_originalVal); 
      } 
    }); 
}); 
})

見DEMO

來源

2013-02-12 01:57:40

謝謝。這工作，雖然jquery和按順序查找所有單詞的精確匹配（在這種情況下，我只是不會做一個拆分，並尋找一個div內的確切字符串）。 – 2013-02-12 07:59:59

查看div是否包含一個或多個輸入的單詞（Javascript）

回答

相關問題