自定义处理网页选区字符并实时显示（js）

概述

浏览网页的时候，可能需要去数一下某段文字的字符数量，或者需要对选中内容做些实时翻译，比如进制的转化，可以使用脚本做个简单的实时翻译。

效果

选中内容，并且鼠标移动时会在左下角显示翻译后的结果。示例为翻译二进制为十进值

使用方式

1. 打开开发者工具
2. 复制以下方法到控制台
3. 执行方法，如果需要自定义处理结果，则第一个参数不为空

/**
 * 显示页面选中字符的长度,可修改处理结果
 * @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)
}