最近，需要做个划词搜索功能。在网上找了好些，最后，参照http://www.cnblogs.com/xinxi/archive/2009/09/28/1575466.html进行修改，实现了想要的功能。这里，做个记录，以备日后所用。

一、DragSearchByJQuery.aspx页面（调用页面）

代码

< head runat = " server " >
     < title > 划词搜索 </ title >
     < style type = " text/css " >
     /* search */
    a.GL_s{width:68px;height:20px;display:block;border:solid 1px #2b7ab7;line - height:20px;padding - left:18px;color:#084f10;font - size:12px;font - weight:bold;background:url(search.gif) no - repeat left;text - decoration:none;}
    a.GL_s:link{filter:alpha(opacity = 71 ); - moz - opacity: 0.7 ;opacity:  0.7 ;}
    a.GL_s:hover{filter:alpha(opacity = 100 ); - moz - opacity: 1.0 ;opacity:  1.0 ;}
     </ style >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
         < div style = " text-align: center; " >
             < input type = " button "  value = " 关闭/打开划词功能 "   />
             < p >
                《红楼梦》是我国古代四大名著之一，属章回体长篇小说，成书于1784年（清乾隆帝四十九年）。梦觉主人序本正式题为《红楼梦》，它的原名《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。是我国古代最伟大的长篇小说，也是世界文学经典巨著之一。作者曹雪芹。现通行的续作是由高鹗续全的一百二十回《红楼梦》。
             </ p >
             < p >
                 if  you want to search,one way  is  to Google,one of the others  is  Baidu </ p >
         </ div >
     </ form >
</ body >
</ html >

相关JQuery

代码

< script type = " text/javascript "  src = " JS/JQuery/jquery-1.4.2.min.js " ></ script >

< script type = " text/javascript "  language = " javascript " >  
     // 划词搜索
    var GLS  =  {};
    GLS.startObj  =   null ;
    GLS.isdb  =   false ;
    GLS.allow  =   true ;
    GLS.isallow  =  function() {
         if  (GLS.allow) {
            GLS.allow  =   false ;
            alert( ' 搜索已关闭 ' );
        }
         else  {
            GLS.allow  =   true ;
            alert( ' 搜索已打开 ' );
        }
    };
    
    GLS.dblclick  =  function() {
        GLS.isdb  =   true ;
    };
    
    GLS.mousedown  =  function(evt) {
        evt  =  (evt)  ?  evt : ((window. event )  ?  window. event  :  "" );
         if  (evt) {
            GLS.startObj  =  (evt.target)  ?  evt.target : evt.srcElement;
        }
    };
    
    GLS.mouseup  =  function(evt) {
        var obj;
        var strlen;
        evt  =  (evt)  ?  evt : ((window. event )  ?  window. event  :  "" );
         if  (evt) {
            obj  =  (evt.target)  ?  evt.target : evt.srcElement;
            strlen  =  window.getSelection  ?  window.getSelection().toString() : document.selection.createRange().text;
        }
        var str  =   "" ;
         if  (obj.tagName  !=   " A "   &&  obj.tagName  !=   " INPUT "   &&  obj  ==  GLS.startObj  &&   ! GLS.isdb  &&  GLS.allow) {
             if  (strlen.length  >   0 ) {
                str  =  strlen;
            }
        }
        GLS.search(str, evt);
        GLS.isdb  =   false ;
    };
    
    GLS.search  =  function(str, evt) {
        var obj  =  $( " #GLSearch " );
        var sDivWidth  =   88 ;  // 检索框“Google搜索”的宽度
         if  (str.toString().length  >   0 ) {
            var windowWidth;  // 窗口的宽
             // 取得窗口的宽
             if  (self.innerWidth) {
                windowWidth  =  self.innerWidth;
            }  else   if  (document.documentElement  &&  document.documentElement.clientWidth) {
                windowWidth  =  document.documentElement.clientWidth;
            }  else   if  (document.body) {
                windowWidth  =  document.body.clientWidth;
            }
            obj.css({  ' display ' :  ' block ' ,  ' position ' :  ' absolute ' ,  ' zindex ' :  ' 10000 '  });
            var rX, rX, wT;
             if  ($.browser.msie) {
                wT  =  (evt.clientX  +  sDivWidth)  -  windowWidth; 
                rY  =  document.documentElement.scrollTop  +  evt.clientY;
                rX  =  document.documentElement.scrollLeft  +  evt.clientX;
                rY  =  (evt.clientY  <   35 )  ?  (rY  +   5 ) : (rY  -   35 );
                rX  =  (wT  >   0 )  ?  (rX  -  wT) : (rX  +   5 );
            }
             else  {
                var sT  =  (document.documentElement.scrollTop  >   0 )  ?  document.documentElement.scrollTop : document.body.scrollTop;
                wT  =  (evt.pageX  +  sDivWidth)  -  windowWidth;
                rY  =  ((evt.pageY  -  sT)  <   35 )  ?  (evt.pageY  +   5 ) : (evt.pageY  -   35 );
                rX  =  (wT  >   0 )  ?  (evt.pageX  -  wT) : (evt.pageX  +   5 );
            }
            obj.css( " top " , rY);
            obj.css( " left " , rX);
//           obj.html("<a class='GL_s' target='_blank' href=' http://www.google.com/search?ie=UTF-8 &oe=UTF-8&q=" + encodeURIComponent(str) + "'>Google搜索</a>");
            obj.html( " <a class='GL_s' target='_blank' href='Search.aspx?q= "   +  encodeURIComponent(str)  +   " '>搜索</a> " );

}
         else  {
            obj.css( " display " ,  " none " );
        }
    };

// 页面加载
    $(document).ready(function() {
        $(document.body).append( " <div id='GLSearch'></div> " );
        $(document).mousedown(GLS.mousedown).dblclick(GLS.dblclick).mouseup(GLS.mouseup);
    });
</ script >

二、Search.aspx页面（被调用页面）

代码

         < div style = " text-align: center; " >
             < div style = " width: 600px; padding-left: 20px; " >
                 < asp:TextBox ID = " txtContent "  runat = " server " ></ asp:TextBox >
                 < asp:Button ID = " btnSearch "  runat = " server "  Text = " 搜索 "  OnClick = " btnSearch_Click "   />
                 < asp:Label ID = " lblNote "  runat = " server "  Text = ""  ForeColor = " red " ></ asp:Label >
             </ div >
         </ div >

后台

代码

         protected   void  Page_Load( object  sender, EventArgs e)
        {
             if  ( ! IsPostBack)
            {
                 this .txtContent.Text  =  Request.QueryString[ " q " ].ToString();
                btnSearch_Click(sender, e);
            }
        }

protected   void  btnSearch_Click( object  sender, EventArgs e)
        {
             this .lblNote.Text  =   " 搜索关键字为： "   +   this .txtContent.Text;
        }

三、附注

1、使用encodeURIComponent代替 escape的原因

　　escape() 只是为 ASCII字符 做转换工作，转换成的 %unnnn 这样的码，如果要用更多的字符如 UTF-8字符库 就一定要用 encodeURIComponent() 或 encodeURI() 转换才可以成 %nn%nn 这的码才可以escape() 只是为 ASCII字符 做转换工作，转换成的 %unnnn 这样的码，如果要用更多的字符如 UTF-8字符库 就一定要用 encodeURIComponent() 或 encodeURI() 转换才可以成 %nn%nn 这的码才可以。

　　来源：请参见 http://www.misuisui.com/weblog/?p=418

2、网上有一篇是使用Javascript实现的，具体代码为：

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  Codebehind = " DragSearch.aspx.cs "  Inherits = " CanYou.AutoComplete.Web.DragSearch "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
     < title > 划词搜索 </ title >
     < meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
</ head >
< body >
     < form id = " form1 "  runat = " server " >
         < div style = " text-align: center; " >
             < input type = " button "  onclick = " isallow() "  value = " 关闭/打开划词功能 "   />
             < p >
                《红楼梦》是我国古代四大名著之一，属章回体长篇小说，成书于1784年（清乾隆帝四十九年）。梦觉主人序本正式题为《红楼梦》，它的原名《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。是我国古代最伟大的长篇小说，也是世界文学经典巨著之一。作者曹雪芹。现通行的续作是由高鹗续全的一百二十回《红楼梦》。
             </ p >
             < p >
                 if  you want to search,one way  is  to Google,one of the others  is  Baidu </ p >
         </ div >
         <!-- 不足之处：英文语句的，传参不够完整 -->
     </ form >
</ body >
</ html >

< script type = " text/javascript "  language = " javascript " >  
     <!--  
    document.body.onload = adddiv; 
    document.onmousedown = recordobj; 
    document.ondblclick = dbclick; 
    document.onmouseup = showselect; 
    var starobj,isdb = false ,allow = true ; 
    function isallow() 
    { 
         if (allow){ 
            allow = false ; 
            alert( ' is closed ' ); 
        } 
         else { 
            allow = true ; 
            alert( ' is opened ' ); 
        } 
    } 
    
     // ondblclick
    function dbclick() 
    { 
        isdb = true ; 
    } 
    
     // onmousedown
    function recordobj() 
    { 
        starobj = event .srcElement; 
    } 
    
     // onmouseup
    function showselect() { 
        var str = "" ; 
         if ( event .srcElement.tagName != " A " && event .srcElement.tagName != " INPUT " && event .srcElement == starobj &&! isdb && allow) 
        { 
            var oText = document.selection.createRange(); 
             if (oText.text.length > 0 ) 
            { 
                str = oText.text; 
                oText.text = " BuB " + oText.text + " EuE " ; 
            } 
            oText.select(); 
             event .srcElement.innerHTML = event .srcElement.innerHTML.replace( " BuB " , " <u style='FONT-WEIGHT: bold;COLOR: #ff3366'> " ).replace( " EuE " , " </u> " ); 
        } 
        searchgoogle(str) 
        isdb = false ; 
    } 
    
    function searchgoogle(str) 
    { 
        var obj = document.getElementById( " searchgoogle " ); 
         if (str.length > 0 ) 
        { 
            obj.style.display = " block " ; 
            obj.style.position = " absolute " ; 
            obj.style.zindex = 999 ; 
            obj.style.posTop = document.body.scrollTop + event .y - 25 ; 
            obj.style.posLeft = document.body.scrollLeft + event .x + 5 ; 
            obj.style.widht = 80 ; 
            obj.innerHTML = " <a target=_blank href=http://www.google.com/search?ie=gbk&oe=gbk&q= " + str + "  style='BORDER-RIGHT: royalblue thin solid; BORDER-TOP: royalblue thin solid; FONT-WEIGHT: bold; BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid; BACKGROUND-COLOR: inactivecaption; TEXT-DECORATION: none'>搜索相关</a> " ; 
        } 
         else  
        { 
            obj.style.display = " none " ; 
        } 
    } 
    
     // body.onload
    function adddiv() 
    { 
        var mobj  =  document.createElement( " div " ); 
        mobj.id = " searchgoogle " ; 
        document.body.appendChild(mobj); 
    } 
     // --> 
</ script >

（参照网址为：http://www.jb51.net/article/20610.htm）

不过，相对上面用JQuery实现的，这个方案，存在的问题是：对包含多个英文单词搜索的，只取了其中一部分进行划词搜索。有待进一步完善。

转载于:https://www.cnblogs.com/lybohe0807/archive/2010/09/13/1825347.html

划词搜索实现（备忘）相关推荐

  1. 划词搜索被ewido视为高风险Adware.wSerarch

    划词搜索被ewido视为高风险Adware.wSerarch Lanno Ckeeke 2006-5-7 划词搜索安装程序名称: PHCSetup.exe 若在上网时不小心安装了此程序,它会在系统盘的 ...

  2. 每次打开百度太麻烦？用程序直接打开网页 Python实现百度划词搜索功能（获取剪切板数据）

    浏览顺序 实现划词功能 运行错误 解决问题 转载声明 实现划词功能 说是划词翻译,实际上我们是通过获取用户的剪切板内容,通过一系列的操作得到的.首先呢,我们就先实现如何获取剪切板内容的程序 首先先在桌 ...

  3. QQ2010 SP1新版划词搜索功能演示

        官方网http://im.qq.com/qq/2010/standard_sp1/###站:其主要功能可以在聊天窗口右边显示广告位,不用打开浏览器不占用电脑内存,方便边搜边聊. 站长之家Chi ...

  4. 有道词典的划词搜索功能加入生成的百度链接

    项目:在<有道词典>的划词搜索里增加百度搜索链接. 概述:有道词典有几个版本增加一个功能,在划词后,可以查看有道网页搜索的结果,很方便.6以后的版本这个功能消失了,所以一直在使用5.X版本 ...

  5. JavaScript特效:划词搜索

    <html> <head> <title>划词搜索</title> <meta http-equiv="Content-Type&quo ...

  6. 如何在网页实现自己的划词搜索

    如何在网页实现自己的划词搜索 近来在网上看到很多,网页里划词搜索的博文.大致都是划词实现GOOGLE或其他搜索引擎的搜索,极大的方便了客户端使用. 但是实现搜索自己的数据库几乎没有论述的.本人略加改动 ...

  7. QQ2010的划词搜索

    不知道你注意到了没有,qq2010的聊天窗口里面已经支持了划词搜索,聊天与搜索的紧密结合,让你倍感惊喜,赶紧来试试吧! 和朋友聊天时,如果出现了搜索需求,选中需要搜索的词,将鼠标放在被选词上,就会出现 ...

  8. 网页划词标记划词搜索功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. 创建chrome右键菜单划词搜索扩展

    转载请注明出处:http://blog.csdn.net/zhymax/article/details/8552830 上网时经常在多个搜索引擎间切换,但使用chrome自带的搜索引擎切换比较麻烦,换 ...

最新文章

  1. Logback 配置文件这样优化，TPS提高 10 倍
  2. Android10.0 Binder通信原理(八)-Framework层分析
  3. 零基础学caffe源码 ReLU激活函数
  4. 自己动手实现简易代码生成器、采用文本模板文件生成服务层、服务层接口代码的做法参考...
  5. JVM并行收集器ParNew、Parallel相关参数
  6. jquery复选框组清空选中的值_jQuery获取复选框被选中数量及判断选择值的方法详解...
  7. LeetCode38.报数
  8. matlab 课程设计循环码性能分析,matlab课程设计--循环码的性能分析
  9. vcpkg Ubuntu安装
  10. 【Linux】ubuntu18.04 安装英伟达显卡驱动
  11. html怎么画表格边框,WEB 制作1px边框表格的几种方法
  12. 网络会变的有自我意识吗
  13. 如何在低代码开发平台上，实施表单设计流程
  14. 消费金融及物流概念介绍
  15. 微信小程序小技巧系列《一》幻灯片，tab导航切换
  16. 2020年南京大学计算机系九推面试
  17. Nova Battles是2022年值得关注的链游
  18. 「UG/NX」BlockUI 字符串String
  19. jQuery 特效：盒子破碎和移动动画效果
  20. ccf——201709-2公共钥匙盒

热门文章

  1. oracle字符串根据分隔符号获取第几个元素
  2. 2022 ICPC 47 沈阳 DCLF
  3. 我和印度人一起值夜班
  4. 计算机主板纽扣电池缺电,主板上的纽扣电池没电了,影响电脑开机吗？
  5. 【重磅】全球首款7nm芯片华为麒麟980“恐怖”面世，双核NPU，10月首发
  6. ELF格式可执行文件，更改符号名称要注意的地方
  7. kafka消息队列的优点
  8. 第一章：为了女神小芳
  9. VMware运维干货分享：使用ESXICLI命令查询，网卡，HBA，RIAD卡信息
  10. 荣耀v30鸿蒙5g荣耀有隔空操作吗,荣耀V30 Pro用了十天，这些功能让人眼前一亮