编程 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 动态设置已知select的option的value值的代码

Dec 16 Javascript

jquery实现弹出窗口效果的实例代码

Nov 28 Javascript

js实现鼠标点击文本框自动选中内容的方法

Aug 20 Javascript

Bootstrap模态框(modal)垂直居中的实例代码

Aug 18 Javascript

12306 刷票脚本及稳固刷票脚本（防挂）

Jan 04 Javascript

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

Mar 06 Javascript

jQuery菜单实例(全选,反选,取消)

Aug 28 jQuery

Node.js 使用递归实现遍历文件夹中所有文件

Sep 18 Javascript

React Native AsyncStorage本地存储工具类

Oct 24 Javascript

在JS循环中使用async/await的方法

Oct 12 Javascript

JavaScript之解构赋值的理解

Jan 30 Javascript

JS 创建对象的模式实例小结

Apr 28 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