完整代碼可在最后代碼塊查看呦！！！
※本貼代碼，可用用于油猴腳本，支持瀏覽器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实现划词取词，可复制百度文库文字（获取鼠标选中区域文字）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。