概述
浏览网页的时候,可能需要去数一下某段文字的字符数量,或者需要对选中内容做些实时翻译,比如进制的转化,可以使用脚本做个简单的实时翻译。
效果
选中内容,并且鼠标移动时会在左下角显示翻译后的结果。示例为翻译二进制为十进值
使用方式
- 打开开发者工具
- 复制以下方法到控制台
- 执行方法,如果需要自定义处理结果,则第一个参数不为空
/*** 显示页面选中字符的长度,可修改处理结果* @param simple 是否使用简单的事件处理逻辑*/
function getSelectionText(simple = true, render) {//监听范围为当下documentlet el = document.body;//添加显示元素let el_num = document.getElementById('selectionNum');if (!el_num) {el_num = document.createElement('div');el_num.setAttribute('id', 'selectionNum');el_num.style = `position: fixed;left: 0px;bottom: 0px;width: 100px;height: 20px;line-height: 20px;border: 1px solid rgb(0, 0, 0);background: rgb(255, 255, 255);`;el.appendChild(el_num)}let text;let paint = () => {//自行修改输出的内容text = document.getSelection().toString();el_num.innerHTML = typeof render == 'function'? render(text):text.length;};let shower = window.shower || {};//移除上次添加的事件el.removeEventListener('mousedown', shower.mouseDownHandle);el.removeEventListener('mousemove', shower.mouseMoveHandle);el.removeEventListener('mouseup', shower.mouseUpHandle);//简单逻辑只使用mousemove 否则使用 mousedown mouseup mousemoveif (simple) {shower.mouseMoveHandle = () => paint();} else {shower.readyShow = false;shower.mouseMoveHandle = () => shower.readyShow && paint();shower.mouseDownHandle = () => {shower.readyShow = true;el.addEventListener('mouseup', shower.mouseUpHandle);el.addEventListener('mousemove', shower.mouseMoveHandle);};shower.mouseUpHandle = () => {shower.readyShow = false;el.removeEventListener('mousemove', shower.mouseMoveHandle);el.removeEventListener('mouseup', shower.mouseUpHandle);};}window.shower = shower;el.addEventListener('mousemove', shower.mouseMoveHandle);el.addEventListener('mousedown', shower.mouseDownHandle)
}