突出显示 URL 中的搜索值答案

【问题标题】：Highlight search values from URL突出显示 URL 中的搜索值
【发布时间】：2012-12-28 22:14:38
【问题描述】：

目前我正在使用一个网站，当您在全局标题中搜索时，您将被带到搜索结果页面。进入搜索结果页面后，您可以在 url 中看到您的搜索。示例：我搜索了大象，search-results.html?elephant。我需要我的搜索结果页面突出显示页面上与该值匹配的所有内容，并且仅突出显示该值。我不希望突出显示在问号之后拾取“搜索”或“结果，值。我找到的最接近的解决方案是这个

http://www.nsftools.com/misc/SearchAndHighlight.htm

但它以某种方式打断了我的 css div 标头。另外，（也许我的大脑只是因为盯着这段代码太久而被炒了）我怎样才能自定义这段代码来读取我的值？这似乎也是一个解决方案，但我无法让它工作。我使用了带有 body onload 的函数 highlightSelection() 并且没有运气。

http://www.switchonthecode.com/tutorials/javascript-highlighting-selected-text

甚至是 Coopster 的帖子，如果我可以从 url 中捕获值的话。我知道我可以 document.write(window.location.search.substr(1)) 它会告诉我。

http://www.webmasterworld.com/forum83/2418.htm

感谢你们的帮助。

【问题讨论】：

标签： javascript jquery url parameters highlight

【解决方案1】：

您可以使用部分乍得解决方案来检索包含特定文本的跨度。然后，不用对整个 HTMLElement 应用 CSS 规则，您可以使用 .html() 检索其内容，使用特定的 <span> 包装特定单词，然后再次使用 .html() 方法更新内容。

// Retrieve and explode URL
var urlParts = window.location.href.split("?");
if (urlParts.length == 2)
{
    // Retrieve all span containing the word
    $("span:contains('" + urlParts[1] + "')").each(function(index, spanElement) {

        var jQSpan = $(spanElement);
        jQSpan.html(jQSpan.html().replace(urlParts[1], '<span class="special">' + urlParts[1] + '</span>'));

    });
}

假设您有一个 .special CSS 类，它会突出显示单词。

.special {
    background-color: yellow;
}

注意：Javascript函数中的单词可以通过PHP或其他服务器端语言注入。

这是一个完整的示例，假设您的 URL 是 http://path/to/your/file.php?Lorem

<html>
    <head>
        <script type="text/javascript" src="path/to/your/jQuery.js"></script>
    </head>
    <body>
        <span>
            Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
        </span>
        <script type="text/javascript">

            // Start when DOM is ready
            $(document).ready(function() {

                var urlParts = window.location.href.split("?");

                // Highlight word if we have a word in parameter
                if (urlParts.length == 2)
                {
                    // Retrieve all span containing the word
                    $("span:contains('" + urlParts[1] + "')").each(function(index, spanElement) {

                        var jQSpan = $(spanElement);
                        jQSpan.html(jQSpan.html().replace(urlParts[1], '<span class="special">' + urlParts[1] + '</span>'));

                    });
                }
            });

        </script>
    </body>
</html>

解释：当 DOM 准备好时，Javascript 代码将尝试提取 URL 中“？”之后的部分。（在我们的例子中，这是“Lorem”）。然后，Javascript 通过 jQuery 检索所有包含此单词的 span，并在每个 span 上循环以使用特殊 span 包装单词（CSS 类为“special”的 span）

如果你更改 URL 中的单词并重新加载页面，高亮将动态变化

【讨论】：

但我不想要特定的文本。它必须是来自 url 的 sarch。
您可以使用 window.location.href 属性并提取您的单词。这部分见这里，很简单：stackoverflow.com/questions/1764778/…
是的，window.location.search.substr(1) 有效。我已经使用了一段时间。不过我需要强调一下。
我也无法让它工作。 sitekickr.com/blog/jquery-search-term-highlighting
我相信你在 span 类标签之后缺少一个 '。另外，我不明白为什么需要包括 Hey。 span:contains('Hey') 你测试过代码吗？这是有道理的，但我无法让它发挥作用。

【解决方案2】：

您可以尝试使用包含： http://docs.jquery.com/Selectors/contains#text

$("span:contains('Hey')").css("text-decoration", "underline");

这个问题你必须有一个类或你想专门搜索的东西，你可以做一个 *:contains 但它最终会抓住每个元素。

http://jsfiddle.net/dLdb2/

您需要通过 javascript 或您使用的任何后端获取 $_GET 值。这是一个使用 jQuery 获取它的链接：

retrieving $_GET variable in jquery

【讨论】：

他/她不想突出显示完整的句子，您的解决方案是在整个跨度上应用 CSS 规则。
我只是想补充一点，jQuery 的“包含”fn 默认情况下不区分大小写。这可能会使一些用户感到困惑，具体取决于他们期望的搜索体验类型。