页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

javascript实现划词标记划词搜索功能修正版

发布：dxy 发布日期：2006-12-27 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Untitled Document</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
</head>  
<body>

<SCRIPT 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 opend');  
}  
}  
function dbclick()  
{  
isdb=true;  
}  
function recordobj()  
{  
starobj=event.srcElement;  
}  
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=UTF-8&oe=UTF-8&q="+encodeURI(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'>Search It！</a>";  
}  
else  
{  
obj.style.display="none";  
}  
}  
function adddiv()  
{  
var mobj = document.createElement("div");  
mobj.id="searchgoogle";  
document.body.appendChild(mobj);  
}  
//-->  
</SCRIPT>  
<INPUT type="button" onclick="isallow()" value="关闭/打开划词功能">  
脚本之家  
</body>  
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

在页面中加上这串代码就行了，同时还有搜索功能。演示效果就请看本BLOG页面上用鼠标划选文字的效果。
PS:由于在中文支持,和编码问题我们给出参数参考
q="+encodeURI(str)+" 这段,大家可以根据需要加escape或encode或不加任何东西

Tags：javascript实现划词标记划词搜索功能修正版