突出显示URL中的搜索值
目前我正在工作的一个网站，当你在全局标题中搜索时，你会被带到搜索结果页面。一旦你进入搜索结果页面，你就可以在url中看到你的搜索结果。例如:我搜索了elephant，search-search ts.html?elephant。我需要我的搜索结果页面突出显示页面上的所有匹配的值，只有值。我不希望高亮显示“搜索”或“结果”紧跟在问号和值之后。
http://www.nsftools.com/misc/SearchAndHighlight.htm
但是它以某种方式中断了我的css div头文件。此外，(也许我的大脑因为长时间盯着这段代码而焦头烂额)，我如何定制这段代码来读取我的值？这似乎也是一个解决方案，但我不能让它工作。我使用highlightSelection()函数时使用了body onload，但没有遇到问题。
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
谢谢你们的帮助。
回答 2
Stack Overflow用户
发布于 2013-01-15 05:56:06
您可以尝试使用contains：http://docs.jquery.com/Selectors/contains#text
$("span:contains('Hey')").css("text-decoration", "underline");问题是，你必须有一个类或者你想要搜索的东西，你可以做一个*:contains，但它最终会抓取每个元素。
http://jsfiddle.net/dLdb2/
您将需要通过javascript或您正在使用的任何后端来获取$_GET值。这里有一个用jQuery获取它的链接：
Stack Overflow用户
发布于 2013-01-15 06:05:36
您可以使用Chad解决方案的一部分来检索包含特定文本的span。然后，您可以使用.html()检索其内容，用特定的<span>包装特定的单词，然后再次使用.html()方法更新内容，而不是对整个HTMLElement应用CSS规则。
// 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代码将尝试提取URL中“？”之后的部分。(在我们的例子中，这是'Lorem')。然后，Javascript通过jQuery检索包含此单词的所有跨度，并在每个跨度上循环以使用特殊跨度包装该单词(跨度具有CSS类' special ')
如果更改URL中的单词并重新加载页面，突出显示将动态更改
https://stackoverflow.com/questions/14327151
复制相似问题
腾讯云开发者
