`
hupy
  • 浏览: 188839 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

搜索引擎关键字高亮显示(包括baidu)[javascript]

阅读更多

搜索引擎老是搜到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关键字高亮代码

    从给定的信息来看,本文档主要探讨了一个虚构的故事与JavaScript关键字高亮代码的实际应用相结合的例子。虽然故事本身并不直接关联到具体的IT技术细节,但从文档的部分内容可以看出,它涉及到了HTML与JavaScript的...

    javascript网页关键字高亮代码.docx

    JavaScript网页关键字高亮是一种常见的网页交互效果,常用于搜索引擎结果展示、阅读器或者代码编辑器中,以便用户能快速定位到他们关心的关键信息。以下是一个简单的JavaScript实现关键字高亮的代码示例,以及相关的...

    javascript网页关键字高亮代码

    - 在搜索引擎结果页面中突出显示搜索关键词。 - 文档阅读器或在线阅读网站中,突出显示用户感兴趣的内容。 - 论坛或博客平台,用于突出显示特定话题或用户的发言。 #### 三、技术原理分析 1. **关键词定义**: ...

    仿Google的搜索下拉框从数据库读取关键字,并显示查询的结果

    标题中的“仿Google的搜索下拉框从数据库读取关键字,并显示查询的结果”是指实现一个类似于Google搜索引擎的用户界面功能,该功能可以在用户输入搜索词时动态从数据库中获取匹配的关键字,并在下拉框中展示。...

    JQuery+JS实现仿百度搜索结果中关键字变色效果

    在百度等搜索引擎中,这个功能可以帮助用户快速定位到搜索词所在的句子或段落。 文章给出的代码示例是如何通过JQuery和JavaScript实现上述功能的。代码中涉及到的知识点主要包括: 1. JavaScript的基本语法,如...

    javascript 自动标记来自搜索结果页的关键字

    1. 自动标记关键字的技术概念:在网页中通过JavaScript实现对关键字的自动标记,是将搜索结果页上出现的关键词高亮显示,方便用户快速识别和阅读。这通常用在搜索引擎返回的结果页面上,帮助用户在大量文本中迅速...

    百度+谷歌 搜索模块接口

    百度搜索引擎提供了丰富的搜索服务,通过其API可以实现网页搜索、新闻搜索、视频搜索、图片搜索、地图搜索及音乐搜索等功能。这些功能可以通过不同的参数配置来实现。 #### 1.2 谷歌搜索接口 虽然谷歌在国内的服务...

    jQuery 仿百度搜索功能

    其中,搜索引擎的快速智能提示功能是提高用户体验的重要手段,这正是"jQuery 仿百度搜索功能"所要实现的目标。这个功能通过结合jQuery库和Struts2框架,为网页提供类似百度搜索的自动补全效果,使用户能够更快速、更...

    仿百度输入框智能提示

    在IT行业中,"仿百度输入框智能提示"是一种常见的前端技术实现,主要用于提高用户体验,特别是在搜索引擎、表单输入等场景中。它通过实时分析用户在输入框中输入的关键字,快速匹配并显示相关的建议内容,使得用户...

    Sublime微信小程序语法高亮

    如果你不确定具体位置,可以通过搜索引擎如百度查询“Sublime Text Packages路径”,找到正确的路径。一旦找到,将解压后的"Sublime-wxapp"文件夹复制到这个目录下。Sublime Text会自动检测到新添加的插件,并在下次...

    搜索框百度效果

    这一功能在很多网站和应用程序中被广泛使用,例如搜索引擎、电子商务平台、社交媒体等。 要实现这样的功能,我们需要关注以下几个关键知识点: 1. **实时监听输入**:首先,我们需要在前端页面上创建一个输入框...

    仿百度查询输入框[联想查询]

    "仿百度查询输入框[联想查询]"是一个典型的案例,它旨在模仿百度搜索引擎的智能联想功能,帮助用户更快、更准确地找到他们想要的信息。这个功能在现代网页应用中广泛使用,提升了用户体验,并降低了输入错误的可能...

    Ejear.com 多元搜索.rar

    这个搜索引擎的独特之处在于它整合了来自百度、谷歌和雅虎等多个主流搜索引擎的结果,为用户提供更全面的搜索体验。在.NET编程环境中,这样的功能通常通过Web爬虫或API接口实现,对数据抓取、处理和展示有较高的要求...

    百度搜索精灵 百度搜索精灵 v0.1

    这款工具模仿了百度搜索引擎的结果展示方式,允许用户在搜索结果中进行分页浏览,同时支持自定义添加推广广告和品牌推广内容,以满足不同需求。 首先,我们来深入了解一下这个工具的核心功能——自动关键字获取和...

    自动补全提示(可模糊搜索)的输入框

    在IT领域,自动补全提示是一项非常常见的功能,尤其在搜索引擎和各种输入框中,它极大地提升了用户体验。本文将深入探讨如何使用JavaScript实现一个具备模糊搜索功能的自动补全提示输入框,根据提供的标题和描述,...

    搜索栏自动填充Ajax+Jquery

    其中,搜索栏的自动填充功能是常见且实用的特性,它能够帮助用户快速找到他们想要搜索的内容,比如百度搜索引擎就采用了这一功能。在本教程中,我们将探讨如何使用Asp.Net后端配合jQuery和Ajax技术来实现类似百度...

    自动补全(可模糊搜索)的输入框

    在IT领域,自动补全(AutoComplete)是一种常见的交互设计技术,它被广泛应用于搜索引擎、文本编辑器、命令行工具等场景,目的是提高用户输入效率和用户体验。在本项目中,我们将探讨如何利用JavaScript实现一个具有...

    notepad++ 智能提示插件

    “具体可以百度notepad++的使用”意味着用户可以借助搜索引擎(如百度)来获取关于Notepad++的更多使用技巧和教程,包括如何安装、配置和使用各种插件。 标签中的“CSS”、“HTML”、“JS”和“JQUERY”分别代表了...

    jquery 结合C#后台的数组对文章的关键字自动添加链接的代码

    文件中的代码片段正是将读取到的关键词自动加上超链接,链接指向例如百度这样的搜索引擎,从而为用户提供更多相关信息的入口。 10. C#后端数据传递至前端: 知识点说明:***框架允许在服务器端代码和客户端代码之间...

Global site tag (gtag.js) - Google Analytics