-
易语言划词取词源码
2020-07-23 06:15:04易语言划词取词源码,划词取词,鼠标钩子处理,取词,复制图片到剪贴板,从剪贴板取位图,API_SetWindowsHookEx,API_UnhookWindowsHookEx,API_GetModuleHandle,API_CallNextHookEx,设置剪贴板数据,获取剪贴板数据,打开剪贴... -
win32完成的简单划词取词-屏幕取词
2021-02-23 19:22:36这几天在vs2019完成,win32实现的简单的划词取词小工具,这里把所有工程文件全部上传,希望能帮助到你们 -
快速用JavaScript实现划词取词,可复制百度文库文字(获取鼠标选中区域文字)
2018-11-18 13:38:10首先分析一下划词取词的过程 用户左击鼠标 → 鼠标按下事件onmousedown 鼠标滑过文字 → 文字本身样式改变 转中后抬起鼠标左键 → 鼠标抬起事件onmouseup,同时返回那些文字有变化 那么首先进行简单的代码主体: ...完整代码可在最后代码块查看呦!!!
※本贴代码,可用用于油猴脚本,支持浏览器F12Console控制台直接运行
有一段时间呢在百度文库查询资料时被限制了复制,说什么复制次数已达上限,那个
难受鸭!!于是我打开了传说中的F12,意外的发现了一个功能
就是很意外的发现我所选中的文字会在我的Console视图中显示于是我去看了一下他是那个JS段中打印出来的
97行Emmmm,好像和百度文库没有什么关系,地址好像是我浏览器的插件,然后我将这个插件装入了其他浏览器,发现会报错,应该是兼容问题,之前也想过获取鼠标选中的文字,一直也没有找到代码意思明确的文章,于是趁此时机,学习一波。
首先分析一下划词取词的过程- 用户左击鼠标 → 鼠标按下事件
onmousedown
- 鼠标滑过文字 → 文字本身样式改变
- 转中后抬起鼠标左键 → 鼠标抬起事件
onmouseup
,同时返回那些文字有变化
那么首先进行简单的代码主体:
document.onmousedown = function(event) {//监听当前页面鼠标按下事件 var event = event || window.event;//此处考虑兼容问题 if (event.button == "0" || event.button == "1") {//判断按下的按键(0) document.onmouseup = function(event) {//监听页面中鼠标抬起事件 var txt = ""; if(window.getSelection){//兼容性判断,各浏览器获取有变化处的文字函数不同 txt = window.getSelection();//谷歌等内核浏览器获取方式 }else{ txt = document.selection.createRange().text;//IE普通内核 } console.log(txt);//控制台打印浏览 } } }
可以在页面中添加P标签随便写一些文字,或者放入任意网页console控制台均可,然后鼠标随便选中文字,观察控制台会出现如下内容
恭喜你成功第一步了,那出现了这个当初说好的文字呢???OK其实这个就是文字只是它以一种不同的方式展现了出来,那我们如何得到呢
txt = txt+"";
将变量txt经过这步处理会变为字符串的形式了,这个时候就可以在控制台看到你所选中的文字了,你以为这就完了???不完善一下舒服嘛???冲鸭!!!
继续分析,如果用户点一个按钮,或者选中的是空格怎么办txt = txt.replace(/^\s+|\s+$/g, ""); if (txt != "") { console.log(txt); }
OK,首先一个正则判断,将两端空格去除(带着前面一堆空格获取到的字符串很带劲,试试?滑稽.jpg),之后判断如果为空就不获取,普绕飞科特
划词部分到此结束
接下来需要在选中文字后追加一个div方便用户复制百度文库文字,那么我们可以将其封成一个方法,只要将上面那一步获取到的字符串传入即可function creatDiv(str) { var arr = mousePosition();//这是个获取鼠标当前位置的一个方法 var newDiv = document.createElement('div'); //创建一个div元素; var newContent = document.createTextNode(str);//创建文本内容 newDiv.appendChild(newContent);//将内容放入新创建的div newDiv.id = "bblock";//添加一个ID方便之后的操作 //可以用下操作设置自己想要的CSS属性 newDiv.style.width = "200px";//设置div宽(视自己需求而定) newDiv.style.background = "red";//设置背景颜色 newDiv.style.zIndex = "1000";//设置层级保证在最上方 newDiv.style.position = "absolute";//给div添加绝对定位*必有 //此处要加px否则不生效,+20原因 根据自己需要调整 newDiv.style.left = arr[0] + 20 + "px";//距左侧距离 newDiv.style.top = arr[1] + 0 + "px";//具右侧距离 var bo = document.body; //获取body对象. bo.insertBefore(newDiv, bo.lastChild); //动态插入到body中 } function mousePosition(evt) { //当前鼠标位于页面位置 evt = evt || window.event;//兼容性判断,满足一个即可有值 //兼容写法,获取当前鼠标横坐标 var xPos = evt.pageX || evt.clientX || evt.offsetX || evt.x; //兼容写法,获取当前鼠标纵坐标 var yPos = evt.pageY || evt.clientY || evt.offsetY || evt.y; return [xPos, yPos];//返回数组为当前鼠标横纵坐标 }
你以为这就完了,OK 调BUG阶段
分析:- 用户每次划词后都要生成一个新的,那么旧的怎么关闭?
- 如果用户在生成的div中进行划词操作,是否也要生成新的div?
- 如果才能判断什么情况下要进行销毁旧的div呢?
解决:
- 最好的关闭体验为:单击其他不是新追加的div区域进行关闭
- 否,新div的目的就是让用户可以在这里进行选中复制的,要加判断
- 根据第一条,得到销毁条件
由此可以得到我们还需要两个判断(判断div关闭,判断div中划词),和一个方法(鼠标是否离开div)
设置两个全局变量
var workType = false; //用户当前是否进行了划词 var workTool = false; //用户划词后是否正在取词
根据之前给的ID监听鼠标是否离开窗口,如果在则设置workTool为ture
function bingDiv() { document.getElementById("bblock").onmouseover = function() { workTool = true; }//鼠标移入事件 document.getElementById("bblock").onmouseout = function() { workTool = false; }//鼠标移除事件 }
在划词开始添加判断
if (workTool) { //如果用户在取词则不进行二次划词操作 return 0; } //如果div存在且不是在取词操作 根据ID销毁该div if (document.getElementById("bblock") && !workTool) { document.body.removeChild(document.getElementById("bblock")); } //如果在不是取词操作代码会执行到这里,那么将划词工作状态设为true workType = true;
添加判断只有在划词操作下,鼠标抬起才会进行获取文字,追加div的操作,而此时鼠标抬起后,划词工作状态结束
document.onmouseup = function(event) { if (workType) {//是划词状态才进行如下操作 workType = false;//划词状态结束 var txt = ""; if(window.getSelection){ txt = window.getSelection(); }else{ txt = document.selection.createRange().text; } txt = txt + ""; txt = txt.replace(/^\s+|\s+$/g, ""); if (txt != "") { creatDiv(txt);//传入生成div的函数 } } }
这里有一个坑,为什么要把判断鼠标是否在新追加的div中封成一个方法呢?
这个大多数新手会遇到的问题,因为网页是动态渲染的,如果你直接写到划词的方法中进行判断,js是获取不到这个节点的,所以需要在每次创建节点后再去判断,防止获取不到function creatDiv(str) { var arr = mousePosition(); · · · bo.insertBefore(newDiv, bo.lastChild); //动态插入到body中 bingDiv();//追加完毕后进行判断 }
到这里效果就完全实现了
以下为全部完整代码(可直接打开需要的百度文库,粘贴到console控制台即可使用):
let workType = false; //当前划词状态 let workTool = false; //当前取词状态 document.onmousedown = function(event) { var event = event || window.event; if ((event.button == "0" || event.button == "1") && !workTool) { if (workTool) { //如果用户在取词则不进行二次划词操作 return 0; } if (document.getElementById("bblock") && !workTool) { document.body.removeChild(document.getElementById("bblock")); } workType = true; document.onmouseup = function(event) { if (workType) { workType = false; var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text; txt = txt + ""; txt = txt.replace(/^\s+|\s+$/g, ""); if (txt != "") { creatDiv(txt); } } } } } function mousePosition(evt) { //当前鼠标位于页面位置 evt = evt || window.event; var xPos = evt.pageX || evt.clientX || evt.offsetX || evt.x; var yPos = evt.pageY || evt.clientY || evt.offsetY || evt.y; return [xPos, yPos]; } function creatDiv(str) { var arr = mousePosition(); var newDiv = document.createElement('div'); //创建一个div元素; var newContent = document.createTextNode(str); newDiv.appendChild(newContent); newDiv.id = "bblock"; newDiv.style.width = "200px"; newDiv.style.background = "red"; newDiv.style.position = "absolute"; newDiv.style.left = arr[0] + 20 + "px"; newDiv.style.top = arr[1]+ 0 + "px"; newDiv.style.zIndex = "1000"; var bo = document.body; //获取body对象 bo.insertBefore(newDiv, bo.lastChild); //动态插入到body中 bingDiv(); } function bingDiv() { document.getElementById("bblock").onmouseover = function() { workTool = true; } document.getElementById("bblock").onmouseout = function() { workTool = false; } }
效果:
取词区域的样式可以根据自己需求更改,我就懒一下啦~~~
- 用户左击鼠标 → 鼠标按下事件
-
ununtu20.04系统中如何划词翻译_有道词典for Mac如何在屏幕取词划词?有道词典屏幕取词划词功能使用教程...
2020-11-22 00:29:18最新版网易有道词典 for Mac添加了强力的屏幕取词和划词功能。但是mac版有道词典如何在屏幕取词划词呢?下面为大家带来详细的屏幕取词划词功能的使用教程!一、打开授权因为取词是系统级别功能,因此还需要给APP授权...Mac电脑英文软件看不懂又不会用怎么办?我想你需要翻译软件来帮忙!试试网易有道词典 for Mac吧!最新版网易有道词典 for Mac添加了强力的屏幕取词和划词功能。但是mac版有道词典如何在屏幕取词划词呢?下面为大家带来详细的屏幕取词划词功能的使用教程!
一、打开授权
因为取词是系统级别功能,因此还需要给APP授权才能使用。第一步点击取词,然后选取打开系统偏好设置,授权给APP,只需要在APP前面打钩就代表已经授权了。这时候返回APP使用取词就可以使用了。如下图所示:
二、屏幕取词划词
接着再次在词典右下角的两个选项勾上,然后在一篇英文的网页上面,把光标放到单词上面就会显示出来翻译内容。如下图所示:(由于是词的功能,因此不能够翻译一段话)
以上就是给大家带来的有道词典屏幕取词划词功能使用教程,希望对大家有所帮助!
-
屏幕取词、划词工具
2017-12-12 13:25:52和金山词霸,有道词典完全相同的屏幕取词和划词工具。暂无源码,如有需要可与我联系。 -
Mac 有道词典 无法取词、划词
2020-02-29 13:24:23有道词典右下角取词 划词消失了 因为软件更新,所以在AppStore里下载的有道词典没有这个功能 解决办法:删除,在官方网页上下载,进行安装 官方网址:http://cidian.youdao.com/index-mac.html ...有道词典右下角取词 划词消失了
因为软件更新,所以在AppStore里下载的有道词典没有这个功能
解决办法:删除,在官方网页上下载,进行安装
官方网址:http://cidian.youdao.com/index-mac.html此外,如果开启划词,会与mac的command+c冲突,导致copy失败
建议需要经常使用到command+c的伙伴把划词关掉!! -
js划词翻译、屏幕取词,取词位置获取(真正解决定位问题)
2021-01-03 18:42:04划词、鼠标选词、翻译这些都是很简单的事一般熟悉js鼠标事件都能搞定,而比较难的是怎么确定我们选中的词在哪个位置执行完翻译的结果该怎么定位,这个问题我在开发翻译插件时摸了个深坑,全网搜索不到可用方案,研究...划词、鼠标选词、翻译这些都是很简单的事一般熟悉js鼠标事件都能搞定,而比较难的是怎么确定我们选中的词在哪个位置执行完翻译的结果该怎么定位,这个问题我在开发翻译插件时摸了个深坑,全网搜索不到可用方案,研究有道的划词翻译插件因它代码压缩也没发现他的解决方案,最终在火狐开发文档里找到了normalize才真正解决了定位问题;
鼠标按下弹起和移动的事件这里就不贴代码了,懂的不需要我贴代码,不懂的去菜鸟或w3c那里讲得更详细
获取鼠标选中的词
var selectText = function(){ var selectText = window.getSelection?window.getSelection():document.selection.createRange().text; return selectText.toString(); }
获取最终定位
// _e_point 鼠标事件 var getPosAtPoint = function(_e_point) { var range; var textNode; var offset; var fanyi_pos = null; var scrollTop = that.getScrollTop(); // standard if (document.caretPositionFromPoint) { range = document.caretPositionFromPoint(_e_point.pageX, _e_point.pageY - scrollTop); textNode = range.offsetNode; offset = range.offset; } // WebKit else if (document.caretRangeFromPoint) { range = document.caretRangeFromPoint(_e_point.pageX, _e_point.pageY - scrollTop); textNode = range.startContainer; offset = range.startOffset; } // only split TEXT_NODEs if (textNode.nodeType == 3) { var replacement = textNode.splitText(offset);// 截取鼠标位置之后的文本 var spanElement = document.createElement('span');// 创建标识 spanElement.id = 'nmh_fanyi_dom';// 设置标识类名 textNode.parentNode.insertBefore(spanElement, replacement);// 插入标识 var fanyi_dom = document.getElementById('nmh_fanyi_dom'); fanyi_pos = fanyi_dom.getBoundingClientRect(); fanyi_pos['height'] = fanyi_dom.offsetHeight;// 获取插入标识获得得一行高度 fanyi_dom.parentNode.removeChild(fanyi_dom);// 获取到位置后移除掉标识 textNode.parentNode.normalize();// 合并文本节点 } return fanyi_pos;// 返回位置 }
-
如何打开有道词典的划词,取词
2014-01-23 14:21:231,系统设置选取辅助功能 2,左下角启用辅助设备的控制 -
欧路词典 – 屏幕取词划词翻译 [Mac]
2010-07-18 15:25:00:欧路词典是 Mac 系统上一款国产辞典软件,亮点在于屏幕取词。软件本身的功能也十分强大:能够模糊搜索、只能拼写校正,还能进行文段翻译、朗读。专门针对语言学习者,提供生词本、历史记录等功能。自带词库... -
在PDF文件上进行划词和屏幕取词
2010-02-22 11:36:00想在PDF文件上进行划词和屏幕取词的效果具体实现步骤:1.机子上已经装着Adobe Reader9.0、免费的谷歌金山词霸和有道,在Adobe Reader软件也有金山词霸和有道的插件按钮,可是不起作用,在网上查了查,必须得先装... -
javascript技术 - 划屏取词
2012-08-08 02:37:25以前为一个英语网站写的DEMO 实现功能:获取单词词组内容信息,可以多单词、多句子,但不能跨段落,理论上还是可以实现的,但DEMO中没有开发这个功能:) -
欧陆词典在线划词翻译
2020-11-19 09:29:03面向法语、德语、西班牙语和英语各领域为广大学习用户提供集词典、听力和翻译于一体的教育使用工具,产品包括欧路词典、每日英语听力、法语助手、德语助手以及西班牙语助手等,支持屏幕取词、划词搜索、在线翻译等... -
如何在mac系统下 开启(配置)有道词典的屏幕划词(句)
2013-11-11 16:15:50首先打开系统设置中的万能辅助选项,勾选允许辅助设备,然后点击有道词典,点击右上角的设置按钮,打开划词取词选项卡,设置好快捷键,划词功能即可使用 -
划词取译时,点击弹出翻译框的右上角齿轮设置时,会自动弹出两个标签页
2020-12-28 03:01:47<div><p>这两个标签页,一个是设置页,一个是提示页,默认激活的是提示页, 提示页显示如下内容: /<strong><em>*</em></strong><strong><em>*</em></strong><strong><em>*</em></strong>... -
用JScript如何实现类似于有道词典划屏取词的功能
2012-08-06 15:38:26RT -
浅谈屏幕取词划词与API HOOK、远程注入的关系以及技术原理
2017-08-29 10:03:35说到屏幕取词,就是通过拦截windows的显示API,获取输出的文本,然后提取出自己想要的信息的一个技术手段。windows有这么几个常用的,TextOutA,TextOutW,ExtTextOutA,ExtTextOutW以及Diretc3D的一些绘制函数(nopad,...
-
6、数据分析matplotlib
-
基于Qt的LibVLC开发教程
-
MySQL 事务和锁
-
刑法学--期末复习题(含答案).pdf
-
浙江科技学院《电力电子》18套历年期末考试试卷.pdf
-
企业数字化升级之路百家企业数字化转型发展分析报告.pdf
-
剑指 Offer 28. 对称的二叉树
-
765. 情侣牵手 查并集
-
【C语言】学习笔记--单目操作符有哪些呢?(2)
-
Java自学第11天 面向对象
-
浙江大学《微积分(1)》历年期末考试试题.pdf
-
中山大学《俱乐部管理》期末考试试卷.pdf
-
朱老师鸿蒙系列课程第1期-3.鸿蒙系统Harmonyos源码配置和管理
-
数学建模竞赛论文写作方法.pptx
-
MySQL 高可用(DRBD + heartbeat)
-
SpringBoot整合Redis
-
1-算法leetcode 876 快慢指针
-
浙江科技学院《抗震》知识点总结.pdf
-
燕山大学《线性代数》期末考试(含答案).pdf
-
【硬核】一线Python程序员实战经验分享(1)