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;// 返回位置
}
相關文章
- 有道雲詞典--翻譯/螢幕取詞翻譯
- WPF 被 靈格斯翻譯官 取詞帶崩
- Ubuntu安裝劃詞翻譯軟體Goldendict 單詞翻譯 句子翻譯UbuntuGo
- SnowNLP——獲取關鍵詞(keywords(1))
- API介面獲取搜尋詞統計?API
- Python分析36套四級真題獲取詞頻最高5000個詞彙,還怕四級不過麼Python
- 歌詞翻譯
- 小程式獲取當前元素在螢幕中的位置
- 網易雲歌詞爬取(java)Java
- 詞典翻譯 英譯漢
- Python 爬蟲獲取網易雲音樂歌手歌詞Python爬蟲
- win10電腦中安裝有道詞典後會自動取詞如何解決Win10
- JS,Jquery獲取各種螢幕的寬度和高度JSjQuery
- ES 實現實時從Mysql資料庫中讀取熱詞,停用詞MySql資料庫
- python讀取txt文字資料進行分詞並生成詞雲圖片Python分詞
- BeautifulSoup + requests 爬取扇貝 python 單詞書Python
- Node.js 解決Gzip下獲取真實的下載進度問題Node.js
- 英語詞典翻譯查詢工具:Eudic歐路詞典 for MacMac
- 織夢標籤標題關鍵詞描述的調取方法
- 獲取各種螢幕高度寬度(工作)
- android通過MediaProjection獲取螢幕內容AndroidProject
- 使用Python呼叫API介面獲取京東關鍵詞詳情資料PythonAPI
- 快手API介面:根據關鍵詞獲取海量商品列表的秘訣API
- 獲取位置資訊
- “動態規劃”這詞太嚇人,其實可以叫“狀態快取”動態規劃快取
- Flutter 中獲取螢幕以及 Widget 的寬高Flutter
- PHP讀取文字並計算單詞所在行列PHP
- selenium 知網爬蟲之根據【關鍵詞】獲取文獻資訊爬蟲
- mac端好用軟體LyricsX for mac:自動獲取和顯示歌詞工具Mac
- 透過JAVA語言如何獲取淘寶/天貓搜尋詞推薦Java
- 單詞劃分
- 爬取有道翻譯
- 單詞搜尋問題
- WIN32API:獲取螢幕的解析度Win32API
- VVICAPI介面解析,實現根據關鍵詞取商品列表API
- js獲取日期JS
- Java socket 獲取gps定位Java
- 免費全能查詞翻譯軟體網易有道詞典Mac官方免fei版Mac