完整代码可在最后代码块查看呦！！！

※本贴代码，可用用于油猴脚本，支持浏览器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;
    }
}

效果：


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

Mac电脑英文软件看不懂又不会用怎么办？我想你需要翻译软件来帮忙！试试网易有道词典 for Mac吧！最新版网易有道词典 for Mac添加了强力的屏幕取词和划词功能。但是mac版有道词典如何在屏幕取词划词呢？下面为大家带来详细的屏幕取词划词功能的使用教程！
一、打开授权
因为取词是系统级别功能，因此还需要给APP授权才能使用。第一步点击取词，然后选取打开系统偏好设置，授权给APP，只需要在APP前面打钩就代表已经授权了。这时候返回APP使用取词就可以使用了。如下图所示：
二、屏幕取词划词
接着再次在词典右下角的两个选项勾上，然后在一篇英文的网页上面，把光标放到单词上面就会显示出来翻译内容。如下图所示：（由于是词的功能，因此不能够翻译一段话）
以上就是给大家带来的有道词典屏幕取词划词功能使用教程，希望对大家有所帮助！

有道词典右下角取词 划词消失了

因为软件更新，所以在AppStore里下载的有道词典没有这个功能

解决办法：删除，在官方网页上下载，进行安装

官方网址：http://cidian.youdao.com/index-mac.html
此外，如果开启划词，会与mac的command+c冲突，导致copy失败

建议需要经常使用到command+c的伙伴把划词关掉！！

划词、鼠标选词、翻译这些都是很简单的事一般熟悉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;// 返回位置	    
	}