完整代碼可在最后代碼塊查看呦！！！
※本貼代碼，可用用于油猴腳本，支持瀏覽器F12Console控制臺(tái)直接運(yùn)行
有一段時(shí)間呢在百度文庫(kù)查詢資料時(shí)被限制了復(fù)制，說(shuō)什么復(fù)制次數(shù)已達(dá)上限，那個(gè)
難受鴨！！于是我打開(kāi)了傳說(shuō)中的F12，意外的發(fā)現(xiàn)了一個(gè)功能

就是很意外的發(fā)現(xiàn)我所選中的文字會(huì)在我的Console視圖中顯示于是我去看了一下他是那個(gè)JS段中打印出來(lái)的

97行Emmmm，好像和百度文庫(kù)沒(méi)有什么關(guān)系，地址好像是我瀏覽器的插件，然后我將這個(gè)插件裝入了其他瀏覽器，發(fā)現(xiàn)會(huì)報(bào)錯(cuò)，應(yīng)該是兼容問(wèn)題，之前也想過(guò)獲取鼠標(biāo)選中的文字，一直也沒(méi)有找到代碼意思明確的文章，于是趁此時(shí)機(jī)，學(xué)習(xí)一波。
首先分析一下劃詞取詞的過(guò)程

用戶左擊鼠標(biāo) ??????????? →?鼠標(biāo)按下事件onmousedown

鼠標(biāo)滑過(guò)文字 ????????????→?文字本身樣式改變

轉(zhuǎn)中后抬起鼠標(biāo)左鍵??→?鼠標(biāo)抬起事件onmouseup，同時(shí)返回那些文字有變化

那么首先進(jìn)行簡(jiǎn)單的代碼主體：

document.onmousedown = function(event) {//監(jiān)聽(tīng)當(dāng)前頁(yè)面鼠標(biāo)按下事件var event = event || window.event;//此處考慮兼容問(wèn)題if (event.button == "0" || event.button == "1") {//判斷按下的按鍵（0）document.onmouseup = function(event) {//監(jiān)聽(tīng)頁(yè)面中鼠標(biāo)抬起事件var txt = "";if(window.getSelection){//兼容性判斷，各瀏覽器獲取有變化處的文字函數(shù)不同txt = window.getSelection();//谷歌等內(nèi)核瀏覽器獲取方式}else{txt = document.selection.createRange().text;//IE普通內(nèi)核}console.log(txt);//控制臺(tái)打印瀏覽} } }

可以在頁(yè)面中添加P標(biāo)簽隨便寫一些文字，或者放入任意網(wǎng)頁(yè)console控制臺(tái)均可，然后鼠標(biāo)隨便選中文字，觀察控制臺(tái)會(huì)出現(xiàn)如下內(nèi)容

恭喜你成功第一步了，那出現(xiàn)了這個(gè)當(dāng)初說(shuō)好的文字呢？？？OK其實(shí)這個(gè)就是文字只是它以一種不同的方式展現(xiàn)了出來(lái)，那我們?nèi)绾蔚玫侥?/p> txt = txt+"";

將變量txt經(jīng)過(guò)這步處理會(huì)變?yōu)樽址男问搅?這個(gè)時(shí)候就可以在控制臺(tái)看到你所選中的文字了，你以為這就完了？？？不完善一下舒服嘛？？？沖鴨！！！
繼續(xù)分析，如果用戶點(diǎn)一個(gè)按鈕，或者選中的是空格怎么辦

txt = txt.replace(/^\s+|\s+$/g, "");if (txt != "") {console.log(txt);}

OK,首先一個(gè)正則判斷，將兩端空格去除（帶著前面一堆空格獲取到的字符串很帶勁，試試？滑稽.jpg），之后判斷如果為空就不獲取，普繞飛科特

劃詞部分到此結(jié)束
接下來(lái)需要在選中文字后追加一個(gè)div方便用戶復(fù)制百度文庫(kù)文字，那么我們可以將其封成一個(gè)方法，只要將上面那一步獲取到的字符串傳入即可

function creatDiv(str) {var arr = mousePosition();//這是個(gè)獲取鼠標(biāo)當(dāng)前位置的一個(gè)方法var newDiv = document.createElement('div'); //創(chuàng)建一個(gè)div元素；var newContent = document.createTextNode(str);//創(chuàng)建文本內(nèi)容newDiv.appendChild(newContent);//將內(nèi)容放入新創(chuàng)建的divnewDiv.id = "bblock";//添加一個(gè)ID方便之后的操作//可以用下操作設(shè)置自己想要的CSS屬性newDiv.style.width = "200px";//設(shè)置div寬（視自己需求而定）newDiv.style.background = "red";//設(shè)置背景顏色newDiv.style.zIndex = "1000";//設(shè)置層級(jí)保證在最上方newDiv.style.position = "absolute";//給div添加絕對(duì)定位*必有//此處要加px否則不生效，+20原因 根據(jù)自己需要調(diào)整newDiv.style.left = arr[0] + 20 + "px";//距左側(cè)距離newDiv.style.top = arr[1] + 0 + "px";//具右側(cè)距離var bo = document.body; //獲取body對(duì)象.bo.insertBefore(newDiv, bo.lastChild); //動(dòng)態(tài)插入到body中 } function mousePosition(evt) { //當(dāng)前鼠標(biāo)位于頁(yè)面位置evt = evt || window.event;//兼容性判斷，滿足一個(gè)即可有值//兼容寫法，獲取當(dāng)前鼠標(biāo)橫坐標(biāo)var xPos = evt.pageX || evt.clientX || evt.offsetX || evt.x;//兼容寫法，獲取當(dāng)前鼠標(biāo)縱坐標(biāo)var yPos = evt.pageY || evt.clientY || evt.offsetY || evt.y;return [xPos, yPos];//返回?cái)?shù)組為當(dāng)前鼠標(biāo)橫縱坐標(biāo) }

你以為這就完了，OK 調(diào)BUG階段
分析：

用戶每次劃詞后都要生成一個(gè)新的，那么舊的怎么關(guān)閉？

如果用戶在生成的div中進(jìn)行劃詞操作，是否也要生成新的div？

如果才能判斷什么情況下要進(jìn)行銷毀舊的div呢？

解決：

最好的關(guān)閉體驗(yàn)為：單擊其他不是新追加的div區(qū)域進(jìn)行關(guān)閉

否，新div的目的就是讓用戶可以在這里進(jìn)行選中復(fù)制的，要加判斷

根據(jù)第一條，得到銷毀條件

由此可以得到我們還需要兩個(gè)判斷（判斷div關(guān)閉，判斷div中劃詞），和一個(gè)方法（鼠標(biāo)是否離開(kāi)div）

設(shè)置兩個(gè)全局變量

var workType = false; //用戶當(dāng)前是否進(jìn)行了劃詞 var workTool = false; //用戶劃詞后是否正在取詞

根據(jù)之前給的ID監(jiān)聽(tīng)鼠標(biāo)是否離開(kāi)窗口，如果在則設(shè)置workTool為ture

function bingDiv() {document.getElementById("bblock").onmouseover = function() {workTool = true;}//鼠標(biāo)移入事件document.getElementById("bblock").onmouseout = function() {workTool = false;}//鼠標(biāo)移除事件 }

在劃詞開(kāi)始添加判斷

if (workTool) { //如果用戶在取詞則不進(jìn)行二次劃詞操作return 0;}//如果div存在且不是在取詞操作 根據(jù)ID銷毀該divif (document.getElementById("bblock") && !workTool) {document.body.removeChild(document.getElementById("bblock"));}//如果在不是取詞操作代碼會(huì)執(zhí)行到這里，那么將劃詞工作狀態(tài)設(shè)為trueworkType = true;

添加判斷只有在劃詞操作下，鼠標(biāo)抬起才會(huì)進(jìn)行獲取文字，追加div的操作,而此時(shí)鼠標(biāo)抬起后，劃詞工作狀態(tài)結(jié)束

document.onmouseup = function(event) {if (workType) {//是劃詞狀態(tài)才進(jìn)行如下操作workType = false;//劃詞狀態(tài)結(jié)束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的函數(shù)}} }

這里有一個(gè)坑，為什么要把判斷鼠標(biāo)是否在新追加的div中封成一個(gè)方法呢？
這個(gè)大多數(shù)新手會(huì)遇到的問(wèn)題，因?yàn)榫W(wǎng)頁(yè)是動(dòng)態(tài)渲染的，如果你直接寫到劃詞的方法中進(jìn)行判斷，js是獲取不到這個(gè)節(jié)點(diǎn)的，所以需要在每次創(chuàng)建節(jié)點(diǎn)后再去判斷，防止獲取不到

function creatDiv(str) {var arr = mousePosition();···bo.insertBefore(newDiv, bo.lastChild); //動(dòng)態(tài)插入到body中bingDiv();//追加完畢后進(jìn)行判斷}

到這里效果就完全實(shí)現(xiàn)了

以下為全部完整代碼（可直接打開(kāi)需要的百度文庫(kù)，粘貼到console控制臺(tái)即可使用）：

let workType = false; //當(dāng)前劃詞狀態(tài) let workTool = false; //當(dāng)前取詞狀態(tài) document.onmousedown = function(event) { var event = event || window.event;if ((event.button == "0" || event.button == "1") && !workTool) {if (workTool) { //如果用戶在取詞則不進(jìn)行二次劃詞操作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) { //當(dāng)前鼠標(biāo)位于頁(yè)面位置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'); //創(chuàng)建一個(gè)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對(duì)象bo.insertBefore(newDiv, bo.lastChild); //動(dòng)態(tài)插入到body中bingDiv(); }function bingDiv() {document.getElementById("bblock").onmouseover = function() {workTool = true;}document.getElementById("bblock").onmouseout = function() {workTool = false;} }

效果：

取詞區(qū)域的樣式可以根據(jù)自己需求更改，我就懶一下啦~~~

總結(jié)

以上是生活随笔為你收集整理的快速用JavaScript实现划词取词，可复制百度文库文字（获取鼠标选中区域文字）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。