使用 JavaScript 在页面上搜索文本答案

【问题标题】：Search text on a page with JavaScript使用 JavaScript 在页面上搜索文本
【发布时间】：2015-10-31 13:18:37
【问题描述】：

我有一个常见问题解答页面，我想包含搜索功能，这样人们就不必阅读整个页面来找到他们正在寻找的内容。

jQuery("#search_submit").on("click", function () {
    //var search_str = jQuery("#search_text").val();console.log(search_str);
    findString('');
    return false;
});

var TRange=null;

function findString (str) {
    str = document.getElementById('search_text').value;//jQuery("#search_text").val();
    if (parseInt(navigator.appVersion)<4) return;
    var strFound;
    if (window.find) {

        // CODE FOR BROWSERS THAT SUPPORT window.find

        var original_content = window;
        strFound=original_content.find(str);
        if (!strFound) {
            strFound=original_content.find(str,0,1);
            while (original_content.find(str,0,1)) continue;
        }
    }
    else if (navigator.appName.indexOf("Microsoft")!=-1) {

        // EXPLORER-SPECIFIC CODE

        if (TRange!=null) {
            TRange.collapse(false);
            strFound=TRange.findText(str);
            if (strFound) TRange.select();
        }
        if (TRange==null || strFound==0) {
            TRange=self.document.body.createTextRange();
            strFound=TRange.findText(str);
            if (strFound) TRange.select();
        }
    }
    else if (navigator.appName=="Opera") {
        alert ("Opera browsers not supported, sorry...")
        return;
    }
    if (!strFound) alert ("String '"+str+"' not found!")
    return;
}

我正在使用这个script，但我不确定我做错了什么。它只搜索搜索文本输入字段之前的部分页面。

这是 jsfiddle 上的所有设置 http://jsfiddle.net/sandyrig/h86knpsq/1/

尝试搜索“stuff”或“lol”这个词，你就会明白我的意思。

编辑

此外，实际上页面加载时页面中的所有问题都处于折叠状态，因此我将自定义此脚本，以便即使在折叠的答案中也能找到文本，并在搜索页面时将其解开。

【问题讨论】：

你可以让用户知道所有的主要浏览器都集成了这个功能，看起来有点不切实际，不是吗？
您使用的脚本似乎非常非常古老。您链接到的那个页面引用了 Netscape 和 IE4 :)
@Script47 这是客户的要求，也是设计的一部分，我们的目标受众不是很懂电脑。
这是客户的要求 他们不可能意味着让您重新实现 ctrl-f 样式查找，对吗？如果这是一个常见问题解答，他们是否希望将问题列表过滤为仅包含搜索词的问题，并且如果您感到困惑，可能会在页面上突出显示搜索词的所有实例。那将是值得编码的东西。已经存在的要求不值得任何人花时间。不是你的，也绝对不是用户的。
拜托所有美好的事物和 JS 的爱，让我们专注于调试代码而不是建议替代方案。此代码适用于脚本的演示页面，但不适用于我的小提琴示例。只需要找出原因。

标签： javascript search text webpage

【解决方案1】：

阅读您链接的页面上的说明。他们通过将输入框放在iframe 中，从页面的 HTML 中排除了输入框。在您的代码中发生的情况是，一旦 .find() 函数到达 input 字段，它就会切换焦点并重新开始搜索。

尝试将您要搜索的文本硬编码为不在输入字段中的内容，您会发现它有效。

工作示例：http://jsfiddle.net/daqb13n0/

另外，正如@CurtisAutery 所说，过滤功能会更有意义。如果这是客户的要求，那么您作为专业人士的工作就是向客户解释他们的错误之处。或者，他们不知道过滤是什么，也没有人问他们。

此外，现在它会在页面上的任何地方搜索文本，您会希望将结果限制为可用问题和答案中的文本，对吗？

TL;DR：

如果你想让它在你链接的页面上工作：输入一个 iframe。
如果你想提供一个好的产品：让客户相信什么他们想要的是一个过滤功能。

【讨论】：