js划词翻译、屏幕取词，取词位置获取（真正解决定位问题）

小鱼儿 2023-01-01 15:48 83阅读 0赞

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