查看div是否包含一个或多个输入的单词(Javascript)
我想检查任何div是否包含输入字段中输入的所有单词。然而,目前我陷入了一种情况,即一旦进入一个空间,它就会重新开始,因此它的行为类似于OR运算符,而不是and运算符。谁能把我推到正确的方向吗?非常感谢 这就是我到目前为止所做的:查看div是否包含一个或多个输入的单词(Javascript),javascript,search,html,contains,Javascript,Search,Html,Contains,我想检查任何div是否包含输入字段中输入的所有单词。然而,目前我陷入了一种情况,即一旦进入一个空间,它就会重新开始,因此它的行为类似于OR运算符,而不是and运算符。谁能把我推到正确的方向吗?非常感谢 这就是我到目前为止所做的: <div class="search">aa ab ac ad</div> <div class="search">ab ba bb bc</div> <div class="search">bb cc dd
<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是否以任意顺序包含和单词[0]和单词[1]以及单词[2]等等
现在,当拆分发生时,函数将从头开始。还需要检查每个查询词的长度:
<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);">
试试我的代码:
HMTL:
Javascript:
参见
我肯定会考虑使用ReGEX,这似乎更合适。在div[H]样式中添加断言。背景色=“FFF”;因此,一旦发现缺少一个单词,它将设置颜色并转到下一个div…。您还可以将divs[h].style.backgroundColor='ddd';在内环之后。没有必要在每次有单词匹配时设置样式。但是您需要使用一个标签来继续外循环,而不是中断内循环……或者将divs[h].style.backgroundColor='ddd';在内环之前。然后你可以跳过break或continue语句,如果你想的话……而且,我想用户可以选择输入少于4个单词。如果是这样,您可能应该检查查询的.length。如果没有足够的单词,循环就没有意义了,因为你知道它们不全在那里。谢谢。这是可行的,尽管在这种情况下jquery会按顺序查找所有单词的精确匹配,但我不会在div中进行拆分并查找精确的字符串。谢谢!但是现在我该如何让它工作呢?如果我以任何顺序搜索一个div包含的任何两个、三个、四个单词,它会突出显示那个单词,而不会在每个单词之后重新开始?<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">
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;
}
$(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);
}
});
});
})