☰

CSDN 一键替换

CSDN 能有一个自动替换文章中`英文单词`与`数字`为红的标识的功能，用于美化博客，感谢Nyaasu66的支持实现了文字标色

当前为 2022-08-30 提交的版本，查看 最新版本。

// ==UserScript==
// @name         CSDN 一键替换
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  CSDN 能有一个自动替换文章中`英文单词`与`数字`为红的标识的功能，用于美化博客，感谢Nyaasu66的支持实现了文字标色
// @author       QQ858715831
// @match        https://editor.csdn.net/md/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=csdn.net
// @grant        none
// @license      MIT 
// ==/UserScript==


(function () {
    'use strict';

    // Your code here...

    function makeEditableAndHighlight() {//文字标红
        const text = window.getSelection().toString();
        const colour = document.querySelector(".color-input-y").value;
        document.execCommand("insertText", "false", `<font color=${colour}>${text}</font>`);
    }

    function addButton(){//增加按钮
        let buttonList = document.querySelector(".article-bar__user-box");
        if (buttonList) {
            //向页面加入一键替换按钮
            let b = document.createElement("span");
            b.innerHTML =`<input type="color" class="color-input-y" value="#ff0000" />`
      buttonList.appendChild(b);
        b = document.createElement("span");
        b.innerHTML =`<button class="color-btn-y" style="padding: 0 16px;font-size: 16px;height:36px;color: #fff;border: none;border-radius: 18px;white-space: nowrap;background: #fc5531;">颜色替换</button>`
      buttonList.appendChild(b);
        b = document.createElement("span");
        b.innerHTML =`<button class="replace-btn-y" style="padding: 0 16px;font-size: 16px;height:36px;color: #fff;border: none;border-radius: 18px;white-space: nowrap;background: #fc5531;">一键替换</button>`;
        buttonList.appendChild(b);
        addEvent();
    }else {
        console.log("没有找到dom里的按钮栏")
    }
}
    function addEvent(){//绑定事件
        let replaceBtn = document.querySelector(".replace-btn-y");
        let colorBtn = document.querySelector(".color-btn-y");
        //给按钮绑定替换事件
        colorBtn.addEventListener('click', (event)=> {
            makeEditableAndHighlight();

        })
        //给按钮绑定替换事件
        replaceBtn.addEventListener('click', function (event) {
            let editor = document.querySelector(".editor");
            let p = editor.querySelectorAll(".cledit-section>.token.p");
            for (const iterator of p) {
                iterator.innerHTML = iterator.innerHTML.replace(
                    /([A-Za-z0-9_$]*[A-Za-z0-9\s=_$\+\-\*/=@&!@#$%^&||*/(/):.\'\"]+)/g,
                    function rep(str) {
                        //只有一个下列符号不替换
                        if (['-', '+','=', '/', ''].includes(str.trim())) {
                            return str;
                        }
                        return ' `' + `${str}` + '` ';
                    });
            }
            let p2 = editor.querySelectorAll(".blockquote>.token.p");
            for (const iterator of p2) {
                iterator.innerHTML = iterator.innerHTML.replace(
                    /([A-Za-z0-9_$]*[A-Za-z0-9\s=_$\+\-\*/=@&!@#$%^&||*/(/):.\'\"]+)/g,
                    function rep(str) {
                        //只有一个下列符号不替换
                        if (['-', '+','=', '/', ''].includes(str.trim())) {
                            return str;
                        }
                        return ' `' + `${str}` + '` ';
                    });
            }
        })
    }
    function printSth(){
        console.log(`我是卷心菜，
        这个脚本的功能:
        1、一键替换markdown中英文数字
        2、提供文字标红动能`);
    }

    setTimeout(() => {
        printSth();//打印something
        addButton();//添加按钮绑定事件
    }, 2000);
})();