查看 div 是不是包含一个或多个输入的单词（Javascript）

Posted 2023-02-23

【中文标题】查看 div 是不是包含一个或多个输入的单词（Javascript）

【英文标题】：See if div contains one or more entered words (Javascript)查看 div 是否包含一个或多个输入的单词（Javascript）

【发布时间】：2013-01-27 05:35:26

【问题描述】：

我想检查是否有任何 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 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 words[0] AND words[1] AND words[2] 等（因此，以任何随机顺序）？

现在，当拆分发生时，函数从头开始。

【问题讨论】：

我肯定会考虑为此使用正则表达式，它似乎更合适。

在divs[h].style.backgroundColor = '#fff';之后添加break，这样一旦发现缺少一个单词，它就会设置颜色并移动到下一个div。

...您也可以将divs[h].style.backgroundColor = '#ddd'; 放在内部循环之后。每次有单词匹配时都没有必要设置样式。但是，您需要使用标签来continue 外部循环，而不是破坏内部循环。

...或将divs[h].style.backgroundColor = '#ddd'; 放在内部循环之前。然后，您可以根据需要跳过 break 或 continue 语句。

...另外，我想用户可以选择输入少于 4 的单词。如果是这样，您可能应该检查query 的.length。如果没有足够的单词，那么循环就没有意义，因为你知道它们并不全。

【参考方案1】：

还需要检查每个查询词的长度：

<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);">

【讨论】：

谢谢！但是现在我如何让它工作，以便如果我搜索一个 div 包含的任何两个、三个、四个单词（以任何顺序），它会突出显示那个单词并且不会在每个单词之后重新开始？

【参考方案2】：

试试我的代码：

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

【讨论】：

谢谢。这可行，尽管 jquery 并按顺序查找所有单词的完全匹配（在这种情况下，我不会进行拆分并在 div 中查找确切的字符串）。