Question

我有这个用于在div中搜索文本的小脚本：

在这里进行测试： https://jsfiddle.net/w87q9fjy/1/

<script type="text/javascript">  
jQuery(document).ready(function () 
{
$('#search').click(function(){
   $('.net_container').hide();
   var txt = $('#search-criteria').val().toLowerCase(); 
   $('.net_container:contains("'+txt+'")').show(1000).css("color","red");
});
});
</script>

问题是，很多内容都包含大写和小写字母的单词，我需要全部用小写字母进行搜索，另外，我还需要消除带有áéíú字符的字符，以便搜索没有问题

 var txt = $('#search-criteria').val().toLowerCase();

也使用小写字母：

 $('.net_container:contains("'+txt+'")').show(1000).css("color","red");

最后，在两种情况下都更改特殊字符，以显示带有小写字母且没有特殊字符的显示单词，直到我尝试这样做，但我不知道我该如何需要工作，这是真的是因为我对jquery一无所知

非常感谢您的帮助

我从其他用户那里尝试了此代码，但无法使用：

<script type="text/javascript">  
jQuery(document).ready(function () 
{
$('#search').click(function(){
$('.net_container').hide(); 
    /*

   var txt = $('#search-criteria').val().toLowerCase(); 
   $('.net_container:contains("'+txt+'")').show(1000).css("color","red");
   */

var txt = $('#search-criteria').val().toLowerCase();
$('.net_container').filter(function(){
    return $(this).text().toLowercase().includes(txt);    
}).show(1000).css("color","red");


});
});
</script>



<input type="text" class="net_search" value="Buscar Título" onclick="this.value=''" id="search-criteria"/>
<input type="button" id="search" value="GO" class="net_search_boton"/>

Answer 1

您可以使用str.replace(/[^a-z0-9\s]/gi, '')仅接受字母数字值。 JSFiddle（带有您的代码）：http://jsfiddle.net/p9m8wkch/

$('ul li').each(function(){
 var val = $(this).text();
 if(/[^a-z0-9\s]/gi.test(val)){
 $(this).css("color", "red");
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>a</li>
<li>1a</li>
<li>!!s</li>
<li>!%@^#</li>
<li>text ~</li>
</ul>

Answer 2

请改用filter()，以便您可以在回调中匹配大小写。

这是一个简单的例子，只需要小写。它将留给您替换特殊字符

var txt = 'Foo'.toLowerCase();    

$('.net_container').filter(function() {
  return $(this).text().toLowerCase().includes(txt);
}).show(1000).css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="net_container">item 1</li>
  <li class="net_container">item 2</li>
  <li class="net_container">FOO BAR</li>
  <li class="net_container">item 3</li>
</ul>

Answer 3

如果在filter中遇到问题，可以使用each循环。

jQuery(document).ready(function () 
{
  $('#search').click(function(){
	$('.net_container').hide();	   
        var txt = $('#search-criteria').val().toLowerCase();
        
        $('.net_container').each(function(){    		    	
          if($(this).text().toLowerCase().includes(txt)) {        	
        	$(this).show(1000).css("color","red");
          }
       });
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="net_search" value="WORLD" onclick="this.value=''" id="search-criteria"/>
<input type="button" id="search" value="GO" class="net_search_boton"/>


<div class="net_container">
   <span>Hello Cómo estás</span>
</div>


<div class="net_container">
   <span>Cómo estás Hello World</span>
</div>

jQuery包含特殊字符和小写字母

3 个答案: