Javascript 在网站上搜索文本

尊敬的各位委员

我正在设计一个模板的帮助下，在纯HTML的网站

我有一个文本框[search]和Go按钮

我想进行这样的操作，当任何一个人输入特定的文本并按下Go按钮时， 它应该突出显示该网站中与该文本匹配的文本

我该怎么做

---

你的意思是你有一个只有一页的网站？在这种情况下，整个内容已经加载到页面上，您只需在其中进行搜索。使用Javascript和JQuery可以非常轻松地完成这项工作。只需点击按钮，在DOM中寻找字符串，然后在上面做一些事情（例如，滚动到那里，或者高亮显示）

$(document).ready(function(){
        $('#searchItem').keyup(function(){
            var name = $(this).val();
            var pattern = name.toLowerCase(); 
            var targetId = ""; 
            var divs = document.getElementsByClassName("item"); 

            $(document).find('.item').hide();

            $('.item').each(function(i){
                var para = divs[i].getElementsByTagName("p"); 
                var index = para[0].innerText.toLowerCase().indexOf(pattern); 
                if (index != -1) { 
                    $(this).show();
                }
            });
        }); 
    });

---

如果您有多个页面，那么这将是更具挑战性的，因为您没有所有的内容可供客户端使用。在这种情况下，服务器端搜索解决方案会更好。

您没有发布您拥有的内容。我想这就是你所说的

看看这个。我可以为你做这件事，但你必须按照你的想法去做

function highlightInElement(elementId, text){
var elementHtml = document.getElementById(elementId).innerHTML;
var tags = [];
var tagLocations= [];
var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;

//Strip the tags from the elementHtml and keep track of them
var htmlTag;
while(htmlTag = elementHtml.match(htmlTagRegEx)){
    tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
    tags[tags.length] = htmlTag;
    elementHtml = elementHtml.replace(htmlTag, '');
}

//Search for the text in the stripped html
var textLocation = elementHtml.search(text);
if(textLocation){
    //Add the highlight
    var highlightHTMLStart = '<span class="highlight">';
    var highlightHTMLEnd = '</span>';
    elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

    //plug back in the HTML tags
    var textEndLocation = textLocation + text.length;
    for(i=tagLocations.length-1; i>=0; i--){
        var location = tagLocations[i];
        if(location > textEndLocation){
            location += highlightHTMLStart.length + highlightHTMLEnd.length;
        } else if(location > textLocation){
            location += highlightHTMLStart.length;
        }
        elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location);
    }
}

//Update the html of the element
document.getElementById(elementId).innerHTML = elementHtml;
}

highlightInElement("fatDoggie","The dog is really really fat");

函数highlightInElement（元素ID，文本）{
var elementHtml=document.getElementById（elementId）.innerHTML；
var标签=[]；
var标记位置=[]；
var htmlTagRegEx=/{1}/；
//从elementHtml中删除标记并跟踪它们
var-htmlTag；
while（htmlTag=elementHtml.match（htmlTagRegEx））{
标记位置[tagLocations.length]=elementHtml.search（htmlTagRegEx）；
tags[tags.length]=htmlTag；
elementHtml=elementHtml.replace（htmlTag'，）；
}
//在剥离的html中搜索文本
var textLocation=elementHtml.search（文本）；
如果（文本位置）{
//添加突出显示
var highlightHTMLStart=''；
var highlightHTMLEnd=''；
elementHtml=elementHtml.replace（text，highlightHTMLStart+text+highlightHTMLEnd）；
//重新插入HTML标记
var textEndLocation=textLocation+text.length；
对于（i=tagLocations.length-1；i>=0；i--）{
var位置=标记位置[i]；
如果（位置>文本结束位置）{
位置+=highlightHTMLStart.length+HighlightHtmlLend.length；
}else if（位置>文本位置）{
位置+=highlightHTMLStart.length；
}
elementHtml=elementHtml.substring（0，位置）+标记[i]+elementHtml.substring（位置）；
}
}
//更新元素的html
document.getElementById（elementId）.innerHTML=elementHtml；
}
highlightInElement（“肥狗”，“这条狗真的很胖”）；

---

这个提琴是用来突出显示一组文本的，而您应该在搜索中获取变量，并将其放入

highlightInElement（“元素”，“变量”）
试试这个试试这个@viveksalve:好的。张亚赫。amrit_neo yanch回答ekada检查kara。你知道吗？检查这个问题是的。我就是想要这个。谢谢你推荐好的网站我很高兴能帮助我的朋友很抱歉提出了一个旧的帖子，但是帖子中的jsfiddle已经不可用了。上述代码的一个问题是，它不能捕获和删除标记，例如。关于regex应该是什么来只捕获完整的标签有什么想法吗？我不确定这将如何工作。实际的html标记对用户不可见，但是如果我们使用它，就会返回。例如：var position=document.documentElement.innerHTML.indexOf（“”）；将返回一个有效的索引，但用户在网页中实际上不可见