快速用JavaScript实现划词取词，可复制百度文库文字（获取鼠标选中区域文字）

完整代码可在最后代码块查看呦！！！
※本贴代码，可用用于油猴脚本，支持浏览器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);//将内容放入新创建的divnewDiv.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销毁该divif (document.getElementById("bblock") && !workTool) {document.body.removeChild(document.getElementById("bblock"));}//如果在不是取词操作代码会执行到这里，那么将划词工作状态设为trueworkType = 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;}
}

效果：

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

快速用JavaScript实现划词取词，可复制百度文库文字（获取鼠标选中区域文字）相关推荐

C# 获取鼠标选中的文字（屏幕取词）
本来想做鼠标选中翻译小软件,但发现鼠标选取文字获取并不是很容易,经过不断努力,最终实现. 先看展示下面给大家说下过程,经历. 网上大部分说的都是使用金山提供的那个dll去进行实现,但是我尝试了一下, ...
matlab 取点画图,Matlab关于figure中获取鼠标位置点画图问题
在本测试程序中,共有三个文件,untitled.fig.untitled.m和ButtonmoveFcn. 思路:在figure中的axes点击鼠标,画出该点击的位置A,然后滑动鼠标,获取滑动后鼠标的 ...
python屏幕取词getword_专业屏幕取词引擎GetWord
GetWord是一款专业的屏幕取词组件(控件),它可以帮助您在公司产品中快速便捷地集成屏幕取词功能,有效降低软件开发成本.GetWord是世界上第一款也是目前唯一一款全面支持Windows和Adobe ...
python屏幕取词getword_专业屏幕取词引擎-Getword
GetWord是一款专业的屏幕取词组件(控件),它可以帮助您在公司产品中快速便捷地集成屏幕取词功能,有效降低软件开发成本.GetWord是世界上第一款也是目前唯一一款全面支持Windows Vista ...
python屏幕取词getword_GetWord Demo(屏幕取词软件) V5.0.1 官方版
GetWord Demo是款简单实用的截图捕捉文字工具.它可以帮助用户获得截图中的文字,高度精准识别,随意抓取,操作简单,功能强大,非常好用. [主要功能] 1.支持Unicode. 2.支持选择取词 ...
android 屏幕取词像有道,有道词典更新 Android版推出扩充词库桌面版支持Firefox5取词...
Android版推出扩充词库功能: 打开有道词典Android版,按菜单键-选项,即可方便的下载和管理词库,并能选择是否启用和删除词库. 如果想下载新词库,点击即可确认启动下载功能.已经下载到本地的词 ...
java鼠标进入高亮效果_鼠标选中文本划词高亮、再次选中划词取消高亮效果
当我们需要鼠标选中文本后,文本高亮.当再次将选中的文本选中后,取消高亮效果时该如何实现呢? 一.介绍 window.getSelection 获取鼠标选中内容,主要是利用了window.getSele ...
如何在编译器中快速选中一行文字？
最近使用VS2015,发现每次用鼠标选中一行文字很是头疼. 通过Ctrl+A的快捷键可以选中编译器中所有的文字,那么有没有什么办法可以快速选中一行文字呢? 在绝大多数编译器中,快速选中一行的方法如下: ...
Javascript实现划词标记+划词搜索功能代码实例
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> ...
使用Chrome扩展金山词霸取词划意
谷歌浏览器(Chrome)取词插件如何使用谷歌浏览器(Chrome)取词插件? 方法一:应用商店安装请到谷歌Chrome商店下载金山词霸翻译插件.如果无法访问Chrome商店,可以按照下面步骤手动 ...

快速用JavaScript实现划词取词，可复制百度文库文字（获取鼠标选中区域文字）

快速用JavaScript实现划词取词，可复制百度文库文字（获取鼠标选中区域文字）相关推荐

最新文章

热门文章