首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于jquery的划词搜索实现（备忘）

Posted in Javascript onSeptember 14, 2010

参照页面:https://3water.com/article/24825.htm

一、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>

（参照网址为：https://3water.com/article/20610.htm）
不过，相对上面用JQuery实现的，这个方案，存在的问题是：对包含多个英文单词搜索的，只取了其中一部分进行划词搜索。有待进一步完善。

基于jquery的划词搜索实现（备忘）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
基于jquery的页面划词搜索JS
Sep 14 #Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 #Javascript
js输出列表实现代码
Sep 12 #Javascript
JavaScript日历实现代码
Sep 12 #Javascript
某页码显示的helper 少量调整，另附js版
Sep 12 #Javascript
网页中CDATA标记的说明
Sep 12 #Javascript
JavaScript小技巧 2.5 则
Sep 12 #Javascript
UV(1) jenkins(1) 字符串(2) yolo3(1) PV(1) 逆序(1) 线程(1) 访问日志(2) Inception(2) 进程假死(1)
You might like
Thinkphp中Create方法深入探究
2014/06/16 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python引用（import）文件夹下的py文件的方法
2014/08/26 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
阿联酋航空假期：Emirates Holidays
2018/03/20 全球购物
判断单链表中是否存在环
2012/07/16 面试题
2014年银行员工年终自我评价
2014/09/19 职场文书
员工教育培训协议书
2014/09/27 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
假如给我三天光明：舟逆水而行，人遇挫而达 
2019/10/29 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
python3 字符串str和bytes相互转换
2022/03/23 Python
《吸血鬼：避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏