生活随笔
收集整理的這篇文章主要介紹了
自定义处理网页选区字符并实时显示(js)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
概述
瀏覽網(wǎng)頁(yè)的時(shí)候,可能需要去數(shù)一下某段文字的字符數(shù)量,或者需要對(duì)選中內(nèi)容做些實(shí)時(shí)翻譯,比如進(jìn)制的轉(zhuǎn)化,可以使用腳本做個(gè)簡(jiǎn)單的實(shí)時(shí)翻譯。
效果
選中內(nèi)容,并且鼠標(biāo)移動(dòng)時(shí)會(huì)在左下角顯示翻譯后的結(jié)果。示例為翻譯二進(jìn)制為十進(jìn)值
使用方式
打開(kāi)開(kāi)發(fā)者工具復(fù)制以下方法到控制臺(tái)執(zhí)行方法,如果需要自定義處理結(jié)果,則第一個(gè)參數(shù)不為空
function getSelectionText(simple = true, render) {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
);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
)
}
總結(jié)
以上是生活随笔為你收集整理的自定义处理网页选区字符并实时显示(js)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。