首页
所有分类
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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
Javascript中的getter和setter初识
Aug 17 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
Vue中this.$nextTick的作用及用法
Feb 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
帝国时代(1) 西索(1) 我的世界(1) Docker(14) 最终幻想(1) 守望先锋(1) 巫师(1) 城市猎人(1) explain(2) 艾尔登法环(1)
You might like
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python2.7 安装pip的方法步骤（管用）
2019/05/05 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
香港No.1得奖零食网：香港零食大王
2016/07/22 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
2015年资料员工作总结
2015/04/25 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
2021好看的国漫排行榜前十名 《完美世界》上榜，《元龙》排名第一
2022/03/18 国漫
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang