精华内容
下载资源
问答
  • 易语言划词取词源码

    2020-07-23 06:15:04
    易语言划词取词源码,划词取词,鼠标钩子处理,取词,复制图片到剪贴板,从剪贴板取位图,API_SetWindowsHookEx,API_UnhookWindowsHookEx,API_GetModuleHandle,API_CallNextHookEx,设置剪贴板数据,获取剪贴板数据,打开剪贴...
  • 这几天在vs2019完成,win32实现的简单的划词取词小工具,这里把所有工程文件全部上传,希望能帮助到你们
  • 易语言划词取词源码
  • 首先分析一下划词取词的过程 用户左击鼠标 → 鼠标按下事件onmousedown 鼠标滑过文字 → 文字本身样式改变 转中后抬起鼠标左键 → 鼠标抬起事件onmouseup,同时返回那些文字有变化 那么首先进行简单的代码主体: ...

    完整代码可在最后代码块查看呦!!!
    ※本贴代码,可用用于油猴脚本,支持浏览器F12Console控制台直接运行
    有一段时间呢在百度文库查询资料时被限制了复制,说什么复制次数已达上限,那个
    难受鸭!!于是我打开了传说中的F12,意外的发现了一个功能
    在这里插入图片描述
    就是很意外的发现我所选中的文字会在我的Console视图中显示于是我去看了一下他是那个JS段中打印出来的
    在这里插入图片描述
    97行Emmmm,好像和百度文库没有什么关系,地址好像是我浏览器的插件,然后我将这个插件装入了其他浏览器,发现会报错,应该是兼容问题,之前也想过获取鼠标选中的文字,一直也没有找到代码意思明确的文章,于是趁此时机,学习一波。
    首先分析一下划词取词的过程

    1. 用户左击鼠标             → 鼠标按下事件onmousedown
    2. 鼠标滑过文字             → 文字本身样式改变
    3. 转中后抬起鼠标左键  → 鼠标抬起事件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阶段
    分析:

    1. 用户每次划词后都要生成一个新的,那么旧的怎么关闭?
    2. 如果用户在生成的div中进行划词操作,是否也要生成新的div?
    3. 如果才能判断什么情况下要进行销毁旧的div呢?

    解决:

    1. 最好的关闭体验为:单击其他不是新追加的div区域进行关闭
    2. 否,新div的目的就是让用户可以在这里进行选中复制的,要加判断
    3. 根据第一条,得到销毁条件

    由此可以得到我们还需要两个判断(判断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;
        }
    }
    

    效果:
    在这里插入图片描述

    取词区域的样式可以根据自己需求更改,我就懒一下啦~~~

    展开全文
  • 屏幕取词划词工具

    2017-12-12 13:25:52
    和金山词霸,有道词典完全相同的屏幕取词划词工具。暂无源码,如有需要可与我联系。
  • 划词、鼠标选词、翻译这些都是很简单的事一般熟悉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;// 返回位置	    
    	}
    
    展开全文
  • 支持海词词典在Chrome浏览器中实现鼠标取词划词翻译 “海词词典”支持在Chrome浏览器中实现鼠标取词划词翻译。可在查看浏览器网页时快捷的帮助翻译陌生的单词。使用海词词典可快速查询单词,获得海词提供英汉、...
  • 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的伙伴把划词关掉!!

    展开全文
  • 1,系统设置选取辅助功能 2,左下角启用辅助设备的控制

    1,系统设置选取辅助功能

    2,左下角启用辅助设备的控制

    展开全文
  • 说到屏幕取词,就是通过拦截windows的显示API,获取输出的文本,然后提取出自己想要的信息的一个技术手段。windows有这么几个常用的,TextOutA,TextOutW,ExtTextOutA,ExtTextOutW以及Diretc3D的一些绘制函数(nopad,...
  • 欧路词典 – 屏幕取词划词翻译 [Mac]

    千次阅读 2010-07-18 15:25:00
    :欧路词典是 Mac 系统上一款国产辞典软件,亮点在于屏幕取词。软件本身的功能也十分强大:能够模糊搜索、只能拼写校正,还能进行文段翻译、朗读。专门针对语言学习者,提供生词本、历史记录等功能。自带词库...
  • 6. 支持选择取词(亦称高亮取词,划词取词). 7. 支持命令行(Command Prompt)取词. 8. 支持各种标准Windows组件,如对话框、工具栏、菜单、编辑框、组合框、列表框、树型控件等. 9. 支持各种常见办公软件,如...
  • 想在PDF文件上进行划词和屏幕取词的效果具体实现步骤:1.机子上已经装着Adobe Reader9.0、免费的谷歌金山词霸和有道,在Adobe Reader软件也有金山词霸和有道的插件按钮,可是不起作用,在网上查了查,必须得先装...
  • Anki划词制卡助手 -- "划词翻译,一键制卡
  • 面向法语、德语、西班牙语和英语各领域为广大学习用户提供集词典、听力和翻译于一体的教育使用工具,产品包括欧路词典、每日英语听力、法语助手、德语助手以及西班牙语助手等,支持屏幕取词划词搜索、在线翻译等...
  • 以前为一个英语网站写的DEMO 实现功能:获取单词词组内容信息,可以多单词、多句子,但不能跨段落,理论上还是可以实现的,但DEMO中没有开发这个功能:)
  • - 右键支持更多词典页面直达划词方式组合变幻无穷 - 支持四种划词方式,支持鼠标悬浮取词 - 查词面板可钉住可拖动可输入 - 钉住可以配置不同划词方式情境模式快速切换词典组合 - 每个情境模式下设置相互独立,快速...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,201
精华内容 4,080
关键字:

划词取词