搜索引擎老是搜到javaeye上的页面,搜索关键字高亮显示觉得特别有帮助。用google analytics后发现大概80%的流量都是来自搜索引擎。所以觉得也有这个必要实现这个功能。
google到一篇代码,试了试发觉没有作用,可能是浏览器也可以是copy代码没有完整,反正到最后没有成功。不过我看了下代码觉得也挺容易的。关键是document.referrer这个属性。它会记录redirect过来的地址信息。比如搜索引擎就是把搜索的关键字等信息都带过来。
得到搜索关键字只要parse那个连接地址就行了,比较简单。得到关键字后高亮这些内容就行了。也看了之前那本代码,大致看懂了原理,由于这里用了 jquery,想找个现成的插件,结果找到的一些效率实在不敢恭维,页面信息很少的时候确实可以实现,但是内容很多由于纯的replace,非常慢,而且整个替换自后页面整体要重新渲染一遍效果也非常恶心。
自己花了点心思写了个高亮程序。
jQuery.fn.kk_highlight = function(target_value , highlight_style){
this.each(function(){
var children = this.childNodes;
for(var i = 0 ; i < children.length ; i++){
var child = children[i];
//alert(child.nodeType + " " + child.nodeValue);
if(child.nodeType == 3){
//replace
var temp_value = child.nodeValue
//toLowercase
var key_index = temp_value.indexOf(target_value);
if(key_index >= 0){
//alert("get in!!!" + temp_value + "ssss");
child.nodeValue = temp_value.substr(0 , key_index);
//$(child).after("kkkk")
$(child).after("" + target_value + "" + temp_value.substr(key_index + target_value.length));
i += 1;
}
}else{
$(child).kk_highlight(target_value , highlight_style);
}
}
});
};
//$('body').highlight("key words"); 就可以得到效果了
/*
//要加个样式
.jquery-highlight{
background-color:#ff0000;
font-size:16px;
}
*/
虽说小bug估计还有,但是初步还算靠谱。
试试google,试试baidu,结果百度搜中文出了问题。
之前说的通过document.referrer得到搜索引擎的信息,拿到搜索关键字,在这个referrer地址中如果出现中文就是以 escape的形式出现的,形如%B3%B2%C4这样的实行,但是baidu过来的信息这里用decodeURIComponent的时候出错了。
发现google过来的一个中文字对应的是%xx * 3的形式,而百度过来的确只有两个。原因是一个unicode编码而baidu用了gb2312编码。js能处理这些gb2312编码的东西不?
研究了一下否决了,发觉js所有的字符都是unicode处理的,比如"xxx".charCodeAt(0)这个方法返回的字符值始终是 unicode的 fromcharcode方法也是只能处理unicode。这么一来发觉只能借助服务器把gb2312的内容转成unicode了。
试试了,成功。
我有在baidu上试试搜javaeye的中文关键字,结果发觉它都没有实现,哈哈哈哈。
分享到:
相关推荐
在IT行业中,全文内容的关键字搜索与高亮显示是一项常用且重要的功能,尤其在搜索引擎、文档管理系统以及在线阅读平台等领域。这个功能可以帮助用户快速定位到他们关心的信息,提高信息检索的效率。以下将详细讲解这...
从给定的信息来看,本文档主要探讨了一个虚构的故事与JavaScript关键字高亮代码的实际应用相结合的例子。虽然故事本身并不直接关联到具体的IT技术细节,但从文档的部分内容可以看出,它涉及到了HTML与JavaScript的...
JavaScript网页关键字高亮是一种常见的网页交互效果,常用于搜索引擎结果展示、阅读器或者代码编辑器中,以便用户能快速定位到他们关心的关键信息。以下是一个简单的JavaScript实现关键字高亮的代码示例,以及相关的...
- 在搜索引擎结果页面中突出显示搜索关键词。 - 文档阅读器或在线阅读网站中,突出显示用户感兴趣的内容。 - 论坛或博客平台,用于突出显示特定话题或用户的发言。 #### 三、技术原理分析 1. **关键词定义**: ...
标题中的“仿Google的搜索下拉框从数据库读取关键字,并显示查询的结果”是指实现一个类似于Google搜索引擎的用户界面功能,该功能可以在用户输入搜索词时动态从数据库中获取匹配的关键字,并在下拉框中展示。...
在百度等搜索引擎中,这个功能可以帮助用户快速定位到搜索词所在的句子或段落。 文章给出的代码示例是如何通过JQuery和JavaScript实现上述功能的。代码中涉及到的知识点主要包括: 1. JavaScript的基本语法,如...
1. 自动标记关键字的技术概念:在网页中通过JavaScript实现对关键字的自动标记,是将搜索结果页上出现的关键词高亮显示,方便用户快速识别和阅读。这通常用在搜索引擎返回的结果页面上,帮助用户在大量文本中迅速...
百度搜索引擎提供了丰富的搜索服务,通过其API可以实现网页搜索、新闻搜索、视频搜索、图片搜索、地图搜索及音乐搜索等功能。这些功能可以通过不同的参数配置来实现。 #### 1.2 谷歌搜索接口 虽然谷歌在国内的服务...
其中,搜索引擎的快速智能提示功能是提高用户体验的重要手段,这正是"jQuery 仿百度搜索功能"所要实现的目标。这个功能通过结合jQuery库和Struts2框架,为网页提供类似百度搜索的自动补全效果,使用户能够更快速、更...
在IT行业中,"仿百度输入框智能提示"是一种常见的前端技术实现,主要用于提高用户体验,特别是在搜索引擎、表单输入等场景中。它通过实时分析用户在输入框中输入的关键字,快速匹配并显示相关的建议内容,使得用户...
如果你不确定具体位置,可以通过搜索引擎如百度查询“Sublime Text Packages路径”,找到正确的路径。一旦找到,将解压后的"Sublime-wxapp"文件夹复制到这个目录下。Sublime Text会自动检测到新添加的插件,并在下次...
这一功能在很多网站和应用程序中被广泛使用,例如搜索引擎、电子商务平台、社交媒体等。 要实现这样的功能,我们需要关注以下几个关键知识点: 1. **实时监听输入**:首先,我们需要在前端页面上创建一个输入框...
"仿百度查询输入框[联想查询]"是一个典型的案例,它旨在模仿百度搜索引擎的智能联想功能,帮助用户更快、更准确地找到他们想要的信息。这个功能在现代网页应用中广泛使用,提升了用户体验,并降低了输入错误的可能...
这个搜索引擎的独特之处在于它整合了来自百度、谷歌和雅虎等多个主流搜索引擎的结果,为用户提供更全面的搜索体验。在.NET编程环境中,这样的功能通常通过Web爬虫或API接口实现,对数据抓取、处理和展示有较高的要求...
这款工具模仿了百度搜索引擎的结果展示方式,允许用户在搜索结果中进行分页浏览,同时支持自定义添加推广广告和品牌推广内容,以满足不同需求。 首先,我们来深入了解一下这个工具的核心功能——自动关键字获取和...
在IT领域,自动补全提示是一项非常常见的功能,尤其在搜索引擎和各种输入框中,它极大地提升了用户体验。本文将深入探讨如何使用JavaScript实现一个具备模糊搜索功能的自动补全提示输入框,根据提供的标题和描述,...
其中,搜索栏的自动填充功能是常见且实用的特性,它能够帮助用户快速找到他们想要搜索的内容,比如百度搜索引擎就采用了这一功能。在本教程中,我们将探讨如何使用Asp.Net后端配合jQuery和Ajax技术来实现类似百度...
在IT领域,自动补全(AutoComplete)是一种常见的交互设计技术,它被广泛应用于搜索引擎、文本编辑器、命令行工具等场景,目的是提高用户输入效率和用户体验。在本项目中,我们将探讨如何利用JavaScript实现一个具有...
“具体可以百度notepad++的使用”意味着用户可以借助搜索引擎(如百度)来获取关于Notepad++的更多使用技巧和教程,包括如何安装、配置和使用各种插件。 标签中的“CSS”、“HTML”、“JS”和“JQUERY”分别代表了...
文件中的代码片段正是将读取到的关键词自动加上超链接,链接指向例如百度这样的搜索引擎,从而为用户提供更多相关信息的入口。 10. C#后端数据传递至前端: 知识点说明:***框架允许在服务器端代码和客户端代码之间...