需求

什么！！！我居然如此大胆敢教 CSDN 的程序员做事？不不不，只是为了我个人的审美和博客美观，我希望 CSDN 能有一个自动替换文章中 英文单词 与 数字 为红色标识的功能，因为中英文混杂又不带间隔的博客看着太累了。为此我需要使用油猴为 CSDN 写一个脚本，以满足我自己美化文章的需求，效果如下

在这里插入图片描述

学习路线

1 、了解油猴

油猴就是一个脚本管理器，负责打开网页时自动运行脚本，可以添加别人的脚本和自己创建脚本，这些脚本能为网站添加新功能，查看部分vip内容，3倍数播放，去除广告，去除复制限制等。

通过脚本市场可以获取其他人或分享自己的脚本
脚本市场（油叉网）： https://greasyfork.org/zh-CN/

2 、使用油猴

下载地址： http://www.tampermonkey.net/
前者是稳定版本（正式服稳定），后者是测试版（抢先版可以体验许多新功能但是有bug）根据个人选择自行下载
安装完成后就可以自己写脚本或者从脚本市场（油叉网）下载脚本运行啦
在这里插入图片描述

3 、创建自己的脚本

安装完成后，浏览器工具栏上点击油猴，可获取新脚本获取他人写的脚本，也可添加新脚本自己写脚本
在这里插入图片描述

上图的代码解释如下

// @name         你的编写的油猴脚本名字
// @namespace    命名空间；区分脚本名称相同但是作者不同的用户脚本，一般都是写作者的个人网址，也可以写你的博客地址
// @version      脚本版本号，用于后续迭代更新
// @description  功能描述，描述你的这个脚本是做什么的
// @author       作者名称
// @match        该脚本在什么网址页面生效，支持通配符匹配，如https://editor.csdn.net/*，这样以*之前开头的都可以使用这个脚本
// @include		 这个也是该脚本匹配的网址，支持通配符匹配
// @exclude		 这个和 iclude 配合使用，排除匹配到的网址，优先于 include
// @license      MIT 开源协议，规定他人可以对你的代码干什么，改写闭源等等

需要注意的是你的 // @license 必须指定一个协议，否则无法发布到脚本市场给共享
开源协议了解网址：https://choosealicense.com/

需要将自己的代码写在 //you code here 的后面

// ==UserScript==
// @name         CSDN 一键替换
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @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...
   setTimeout(() => {
       console.log("我是卷心菜yst");
       let buttonList = document.querySelector(".article-bar__user-box");
           //向页面加入一键替换按钮
           let b = document.createElement("span");
           b.innerHTML =`<button class="yst" 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);
           let byst = document.querySelector(".yst");
           //给按钮绑定替换事件
           byst.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,(str)=>' `'+`${str}`+'` ');
               }
               //为blockquote里的文字替换
               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,(str)=>' `'+`${str}`+'` ');
               }
           })
   }, 2000);//防止dom没有渲染完就操作
})();