js劃詞翻譯、螢幕取詞,取詞位置獲取(真正解決定位問題)

slongzhang_發表於2021-01-03

劃詞、滑鼠選詞、翻譯這些都是很簡單的事一般熟悉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;// 返回位置	    
	}

相關文章