当前位置：Gxlcms > JavaScript > javascript实现划词标记划词搜索功能修正版

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

时间：2021-07-01 10:21:17 帮助过：9人阅读

<!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="Search It！";  
}  
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="关闭/打开划词功能">  
<p>脚本之家</p>  
</body>  
</html>

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

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

人气教程排行