概述
浏览网页的时候,可能需要去数一下某段文字的字符数量,或者需要对选中内容做些实时翻译,比如进制的转化,可以使用脚本做个简单的实时翻译。
效果
选中内容,并且鼠标移动时会在左下角显示翻译后的结果。示例为翻译二进制为十进值
使用方式
- 打开开发者工具
- 复制以下方法到控制台
- 执行方法,如果需要自定义处理结果,则第一个参数不为空
/**
* 显示页面选中字符的长度,可修改处理结果
* @param simple 是否使用简单的事件处理逻辑
*/
function getSelectionText(simple = true, render) {
//监听范围为当下document
let 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 mousemove
if (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)
}