如何遍历列表以及何时包含单词更改颜色

Question

因此，我需要使用按钮创建搜索字段，当您在搜索字段中输入一个单词，然后按该按钮时，它需要在列表中循环。当列表中包含您输入的单词时，该项目（单词）的背景颜色需要更改。

我在按钮和HTML列表中创建了一个搜索字段。我在JQuery中写过一些东西，但我确实需要帮助。这很难。

$(document).ready( function() {

    $("button").click(function(){
        $("li").each(function(i, element){
            if($(this).css {
                return = '#304878';
            }
        });
    })

});

Answer 1

单击搜索按钮时，将在字符串中用颜色突出显示搜索文本。 尝试下面的代码。

$(document).ready( function() {
	$("button").click(function(){
		
		//Remove the span tag from the text which have class 'highlight'
		$('.add_content').find("span").each(function(index) {
			if($(this).hasClass('highlight')){
				var text = $(this).text();
				$(this).replaceWith(text);
			}
		});
		
		//On click get the search text and highlight. 
		var string_search =  $('#search_box').val();
		$('li').each(function(){
		
			//Enable the case insensitive
			reg = new RegExp(string_search, 'gi');
			$(this).html($(this).html().replace(reg, function(str) {
				return '<span class="highlight">'+str+'</span>'
			}));
		});
	});
});

.highlight{
	color:#304878;
}

   

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <input type="text" id="search_box" name = "search_box">
    <button name="search_buttoon">Search Button</button>
   <ul class="add_content">
	<li>Lorem Ipsum is simply dummy</li>
	<li>ndustry. Lorem Ipsum has been</li>
	<li>It is a long established fact that a reader</li>
</ul>