查看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）

回答

相关问题