Question

目前，我正在使用我正在处理的网站，当您在全局标题中进行搜索时，您将进入搜索结果页面。进入搜索结果页面后，您可以在网址中看到您的搜索结果。示例：我搜索了elephant，search-results.html？elephant。我需要我的搜索结果页面来突出显示页面上与值匹配的所有内容，并且仅显示值。我不希望突出显示选择“搜索”或“问号之后的结果，价值。我发现的最接近的解决方案是

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

但它以某种方式中断了我的css div标题。此外，（也许我的大脑只是盯着这段代码炒了太长时间）我如何自定义这段代码来读取我的价值呢？这似乎也是一个解决方案，但我无法让它工作。我使用了函数highlightSelection（）和body onload，但没有运气。

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

如果我可以从网址中捕获值，那么，或者甚至是Coopster的帖子。我知道我可以document.write（window.location.search.substr（1）），它会告诉我。

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

感谢您的帮助。

Answer 1

您可以尝试使用包含： 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

Answer 2

您可以使用Chad解决方案的一部分来检索包含特定文本的范围。然后，不是将CSS规则应用于整个HTMLElement，而是可以使用.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或其他服务器端语言注入。

以下是一个完整的示例，假设您的网址为 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代码将尝试在＆＃39;？＆＃39;之后提取URL的一部分。（在我们的例子中，这是＆＃39; Lorem＆＃39;）。然后，Javascript通过jQuery检索包含这个单词的所有跨度并在每个跨度上循环以包含具有特殊跨度的单词（带有CSS类的跨度＆＃39;特殊＆＃39;）

如果您更改网址中的字词并重新加载页面，则突出显示将动态更改

突出显示URL中的搜索值

2 个答案: