開發油猴腳本:給任意網頁的選中文字塗色
阿新 • • 發佈:2018-02-10
span create put web replace containe 文本 == per
概述
簡單來說:就像在現實課本上用mark筆塗色劃重點一樣,可以用這個腳本在任意網頁上塗色劃重點。
開發緣由:每次在網上看資料的時候,都會默默歸納幾個重要的地方,但是看完資料寫博客的時候又容易忘重點,所以我開發了這款腳本。
腳本缺陷:(1)不能刷新網頁,否則標記就沒了。(2)只能標記同一種文字,不能超鏈接,文本,引用,強調一起標記,但是可以分開標記。
演示
腳本代碼
首先,需要在瀏覽器上面安裝油猴(Tampermonkey)插件。360瀏覽器可在擴展中心找到。其它瀏覽器的安裝方法請自行百度。
最後,打開油猴->添加新腳本,把代碼復制進去即可
// ==UserScript== // @name Mark on Web // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://developer.mozilla.org/* // @match http://*/* // @match https://*/* // @grant none // @copyright 2018+, yang-zhou // ==/UserScript== (function() { 'use strict'; var funcGetSelectText = function(){ var txt = ''; if(document.selection){ txt = document.selection.createRange().text;//ie }else{ txt = document.getSelection(); } return txt.toString(); }; var container = container || document; container.onmouseup = function(){ var txt = funcGetSelectText(); if(txt) { event.target.innerHTML =event.target.innerHTML.replace(txt, '<span style="background-color:yellow">'+txt+'</span>'); } }; })();
註意:請確保打開網頁的時候開啟了油猴插件,並且啟用了我編寫的腳本。
網頁效果演示
開發油猴腳本:給任意網頁的選中文字塗色