在网站上搜索文本

Question

尊敬的成员们，

我正在使用一个模板纯HTML设计网站。

在其中，我有一个文本框[搜索]和一个前往按钮。

我希望实现这样的操作：当任何人输入某些文本并按下“前往”按钮时， 它应该突出显示与该文本匹配的网站中的文本。

我该如何做到这一点？

谢谢。

- Freelancer

---

请尝试使用此链接：http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html。 - Pankit Kapadia

请尝试访问此链接：http://www.javascripter.net/faq/searchin.htm。 - vivek salve

@viveksalve：好的，这是一个很好的例子。请检查一下amrit_neo的答案。你能实现它吗？ - Freelancer

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

- amrit_neo

---

我不确定这个如何运作。实际的HTML标签对用户不可见，但如果我们使用它，它们将被返回。例如：var position = document.documentElement.innerHTML.indexOf('<p>');会返回一个有效的索引，但在网页上对用户并不可见。 - shrutim

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");中。

- Vivek Dragon

---

请查看这个问题：https://dev59.com/d2s05IYBdhLWcg3wR_22 - Vivek Dragon

是的，这正是我想要的。http://jsfiddle.net/briguy37/JyL4J/ 谢谢您推荐这个好网站。 - Freelancer

我很高兴能帮助我的朋友。 - Vivek Dragon

抱歉提起一篇旧帖，但是帖子中的jsfiddle已经无法使用了。上述代码的一个问题是它不能捕获并删除<button type="button">等标签。有什么想法可以用正则表达式只捕获完整的标签吗？ - Magnus

Answer 3

你的意思是你有一个单页网站吗？在这种情况下，整个内容已经加载到页面上了，你只需要搜索它。你可以使用Javascript和JQuery轻松地做到这一点。只需捕获按钮点击事件，遍历DOM查找您的字符串，然后对其进行某些操作（例如，滚动到该位置或将其突出显示）。

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

- Palantir