javascript实现划词标记划词搜索功能

最新推荐文章于 2024-04-05 23:55:18 发布
最新推荐文章于 2024-04-05 23:55:18 发布
阅读量486 收藏
点赞数
分类专栏： javascript 文章标签： javascript function html button search input

完整示例代码如下：


以下是引用片段：
<!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.οnlοad=adddiv;
document.οnmοusedοwn=recordobj;
document.οndblclick=dbclick;
document.οnmοuseup=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="+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" οnclick="isallow()" value="关闭/打开划词功能">
<p>qrasfdasfasfdasfsafasdfsafsafasdfasdfasd</p>
</body>
</html>
     在页面中加上这串代码就行了，同时还有搜索功能。演示效果就请看本BLOG页面上用鼠标划选文字的效果。

详细参照 :http://www.5h6.com/html/article/30241.html

 
meoocom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jquery的页面划词搜索JS
12-09
基于Jquery修改，以下为全部脚本 代码如下: //划词搜索 var GLS = {}; GLS.startObj = null; GLS.isdb = false; GLS.allow = true; GLS.isallow = function() { if (GLS.allow) { GLS.allow = false; alert(‘Google搜索已关闭’); } else { GLS.allow = true; alert(‘Google搜索已打开’); } }; GLS.dblclick = function() { GLS.isdb = true; }; GLS.mouse
javascript 实现划词标记划词搜索功能
10-29
### JavaScript 实现划词标记与划词搜索...通过以上详细解析，我们不仅了解了如何使用JavaScript实现划词标记与划词搜索功能，还探讨了可能的优化方向和注意事项。希望本文能帮助开发者更好地理解和应用这些技术点。
javascript实现划词标记+划词搜索功能
ZetaChow
09-01 3438
完整示例代码如下Untitled Documentdocument.body.onload=adddiv;document.onmousedown=recordobj;document.ondblclick=dbclick;document.onmouseup=showselect;var starobj,isdb=false,allow=true;function isall
Javascript实现划词标记+划词搜索功能代码实例
管子（zero）的杂乱空间
09-08 1535
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
javascript实现划词标记+划词搜索功能代码实例
u011425213的专栏
07-17 1845
Untitled Document          document.body.onload=adddiv;  document.onmousedown=recordobj;  document.ondblclick=dbclick;  document.onmouseup=showselect;  var starobj,isdb=false,allow=true; 
javascript实现划词标记+划词搜索功能.docx
01-13
### JavaScript 实现划词标记与划词搜索功能详解 #### 一、背景介绍 随着互联网技术的发展，用户对于网页交互体验的要求越来越高。其中，划词标记与划词搜索功能能够显著提升用户体验，使得用户能够在浏览网页时...
javascript实现划词标记划词搜索功能修正版，兼容IE及FF
twosecond
07-14 637
继续看if (navigator.appName=="Microsoft Internet Explorer") {document.body.onload=adddiv;  document.onmousedown=recordobj;  document.ondblclick=dbclick;  document.onmouseup=showselect;} else {//firefoxwi
js 实现 划词搜索
03-30
js 实现 划词搜索! 值得下载看看!资源免费,大家分享!!
网页划词标记划词搜索功能特效代码
03-20
划词通 小巧强悍的划词搜索工具，不打字搜宝贝、搜电影、搜资料，网页，记事本，QQ，Word……都可以用
10-16
划词通：小巧强悍的划词搜索工具，不打字搜宝贝、搜电影、搜资料，网页，记事本，QQ，Word……都可以用。
OCR划词识别工具
06-25
桌面拷屏自动识别工具，可以应用于图片中的文字提取，也没中的文字提取，自动识别。资深OCR开发，欢迎咨询合作。
JavaScript特效:划词搜索
Sparkdream
07-31 186
&lt;html&gt; &lt;head&gt; &lt;title&gt;划词搜索&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;/head&gt; &lt;body&gt; &lt;SCRIPT
如何用JS实现“划词高亮标记”的在线笔记功能？，成长路线
最新发布
2303_79056168的博客
04-05 728
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。[外链图片转存中…(img-unIZKxku-1712332470871)]
纯 JS 实现语雀的划词高亮功能
油墨香^-^的博客
02-03 240
前段时间公司需要实现一个划词评论的功能，但是到网上找了一圈发现划词评论的库并不多，而且大部分的实现都是需要破坏页面 DOM 结构的，也就是需要在页面 DOM 结构中拆分文本包裹一个 mask 标签，但是由于我们做的是在线富文本文档功能，文本的内容是可以再编辑的，如果评论破坏了 DOM 结构这样对我们编辑的时候编辑器解析就不是很友好。找到最后发现语雀实现的划词评论功能是基于 canvas 实现的，与页面结构完全解耦，但是由于语雀没有开源，所以也没办法参考他们的代码，只能顺着他们的思路自己写。
✨如何用JS实现“划词高亮”的在线笔记功能？✨
weixin_33962923的博客
04-21 692
1. 什么是“划词高亮”？ 有些同学可能不太清楚“划词高亮”是指什么，下面就是一个典型的“划词高亮”： 上图的示例网站可以点击这里访问。用户选择一段文本（即划词），即会自动将这段选取的文本添加高亮背景，用户可以很方便地为网页添加在线笔记。 笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮在线笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构，而高亮功能对业务近乎透明。该功...
chrome网页划词翻译-javascript
09-07
Chrome网页划词翻译是一种通过JavaScript实现的功能，在浏览器中，我们可以通过划选文本来进行简单的翻译操作。具体实现的步骤如下： 1. 首先，我们需要通过JavaScript来监听鼠标动作，判断用户是否进行了文本的划...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值