2

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

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

但它以某种方式打断了我的 css div 标题。另外，（也许我的大脑只是因为盯着这段代码太久而被炒了）我怎样才能自定义这段代码来读取我的值？这似乎也是一个解决方案，但我无法让它工作。我将函数 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

谢谢你们的帮助。

4

2 回答 2

2

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

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

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

http://jsfiddle.net/dLdb2/

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

在 jquery 中检索 $_GET 变量

于 2013-01-14T21:56:05.673 回答
1

您可以使用部分乍得解决方案来检索包含特定文本的跨度。然后，不用对整个 HTMLElement 应用 CSS 规则，您可以使用 检索其内容.html()，使用 specific 包装特定单词，<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>'));

    });
}

假设你有一个.specialCSS 类会突出显示这个词。

.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 检索包含该单词的所有跨度，并在每个跨度上循环以使用特殊跨度包装单词（具有 CSS 类“特殊”的跨度）

如果您更改 URL 中的单词并重新加载页面，突出显示将动态更改

于 2013-01-14T22:05:36.440 回答