在网站上搜索文本[关闭]

Question

尊敬的会员，

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

我有一个文本框[搜索] 和 Go 按钮。

我想做这样的操作，当任何人输入某些文本并按下 Go 按钮时， 它应该突出显示该网站中与该文本匹配的文本。

我该怎么做？

比你。

Answer 1

$(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();
                }
            });
        }); 
    });

Answer 2

你没有发布你拥有的东西。我想这就是你所说的。

检查这个。我可以为你做到这一点，但你必须在你的想法中做到这一点

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("Element","Var");

Answer 3

你的意思是你有一个单页网站？在这种情况下，整个内容已经加载到页面上，您只想搜索它。您可以使用 Javascript 和 JQuery 轻松完成。只需单击按钮，然后遍历 DOM 以查找您的字符串，然后对其执行操作（例如，滚动到那里，或突出显示它）。

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