CSDN 一键替换

CSDN 能有一个自动替换文章中`英文单词`与`数字`为红的标识的功能，用于美化博客，感谢Nyaasu66的支持实现了文字标色，实现自动点击按钮
Zadaj pytanie, napisz recenzję, lub zgłoś ten skrypt.
Wrap lines
// ==UserScript==
// @name         CSDN 一键替换
// @namespace    http://tampermonkey.net/
// @version      0.9
// @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 findButtonNode(pointNode) {
        if(pointNode.nodeName=='BODY'){
            return ;
        }else if(pointNode.nodeName == 'BUTTON'){
            return pointNode;
        }
        return findButtonNode(pointNode.parentNode);
    }

    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、提供文字标红动能
        3、自动点击`);
    }
    //加入自动点击按钮
    function addAuto() {
        let drag = document.createElement('div');
        drag.innerText = '自动';
        drag.classList.add('drag-y');
        document.body.appendChild(drag);
        drag.addEventListener('mousedown', (e) => {
            //鼠标按下，计算鼠标触点距离元素左侧和顶部的距离
            let disX = e.clientX - drag.offsetLeft;
            let disY = e.clientY - drag.offsetTop;
            document.onselectstart =function(){
            return false;
        }
            document.onmousemove = function (e) {
                //计算需要移动的距离
                let tX = e.clientX - disX;
                let tY = e.clientY - disY;
                //移动当前元素
                if (tX >= 0 && tX <= window.innerWidth - drag.offsetWidth) {
                    drag.style.left = tX + 'px';
                }
                if (tY >= 0 && tY <= window.innerHeight - drag.offsetHeight) {
                    drag.style.top = tY + 'px';
                }
            };
            //鼠标松开时，注销鼠标事件，停止元素拖拽。
            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
                document.onselectstart =null;
                drag.style.visibility = 'hidden'
                let pointNode = document.elementFromPoint(drag.offsetLeft, drag.offsetTop);
                drag.style.visibility = 'visible'
                //判断覆盖的是否是一个button

                if (pointNode) {
                    pointNode = findButtonNode(pointNode);
                    if(pointNode){
                        document.onmouseup=function addEvent(event) {
                            setTimeout(() => {
                                pointNode.click();
                            }, 100);
                        };
                    }else{
                        console.log('移除绑定按钮或者没有找到按钮');
                        document.onmouseup=null;

                    }
                }
            };
        })
    }
    // 加入class
    function addAutoClass() {
        const style = document.createElement('style');
        style.innerHTML = `
    .drag-y {
    position: fixed;
    top: 50px;
    left: 100px;
    z-index: 999;
    color: white;
    background: black;
    font-size: 12px;
    height: 24px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: -3px 0px 6px 0px #a9a9a980, 3px 0px 6px 0px #a9a9a980;
    border-radius: 4px;
    cursor: pointer;
  }`
    document.head.appendChild(style);
    }


    setTimeout(() => {
        printSth();//打印something
        addButton();//添加按钮绑定事件
        addAutoClass();//添加class
        addAuto();//添加自动点击按钮
    }, 2000);
})();
Greasy Fork镜像

CSDN 一键替换

赞助商

广告
