1. 程式人生 > >開發油猴腳本:給任意網頁的選中文字塗色

開發油猴腳本:給任意網頁的選中文字塗色

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>');
            }
    };
})();

註意:請確保打開網頁的時候開啟了油猴插件,並且啟用了我編寫的腳本。

網頁效果演示

開發油猴腳本:給任意網頁的選中文字塗色