javascript - 在多个li的html中搜索一个字符串

Question

我有一个单页网站，我正在尝试向其中添加搜索功能。使用纯 javascript（无 jquery）我想在搜索框中输入任何单词/短语，并搜索不同 li 的内容/HTML。我猜我将不得不使用innerHTML 和.indexOf 的某种组合，但我不确定。这是我所指的网站的链接http://www.executiveinsurance.com/任何帮助将不胜感激！！！

Answer 1

你可以做这样的事情

var searchKeyword = "sampleSearch";   
var allLis = document.getElementsByTagName("li");
var searchResults = [];
for(var i=0;i<allLis.length;i++){
if(allLis[i].innerHtml.indexOf(searchKeyword)>-1){
searchResults.push(allLis[i]);
}

searchResults 数组应包含其中包含 searchKeyword 的元素。我没有测试过这个，但你明白了。

Answer 2

刚开始，您可以在此基础上进行构建

function search()
{
    var lis = document.getElementsByTagName("li");
    var searchText = document.getElementById("searchBox").value;

    for(var i=0;i<lis.length;i++)
    {
        if(lis[i].innerHTML.indexOf(searchText) > -1)
           lis[i].style.color = 'red';
    }
}​

只是如果您想突出显示特定的单词

lis[i].innerHTML = lis[i].innerHTML.replace(searchText,'<span style="color:red">'+searchText+'</span>');

在此处查看 JsFiddle 演示