（灵感是由某音（小某与Bug）的一个博主的教学下，产生我对 脚本这个概念的认知！于是我决定打开这台好久没有动过的82年的 笔记本 对其进行研究!）
首先要实现的功能是：对某sdn论坛的一些技术文章中的代码块进行非登录状态下的一键复制操作！
其实 很早之前我就有了这样的困惑以及想法，当我每次出现某种疑难需要找我的灵感导师 BaiDu时，搜出来的水文置顶几项基本都是某Sdn,但是打开之后 却发现需要登录之后才能优雅的CV我想要的代码块,但是能力不及野心，我当然也想过临时的解决方案：
//在控制台输入
document.designMode='on'
使用此代码可以 在 任何 无论是某度文库 还是 某sdn 的流氓论坛，都是有效的可以进行直接CV，
但是你们也知道程序员 为什么要写程序,那大概率是因为程序能帮忙自动运作很多事情，来减少人对于某种重复化的事情进行重复的运作，来达到高效率的工作量！（...）
啰嗦这么多，进入正题
（以下代码均在控制台调试下完成）
首先我创建一个函数,产出一个dom元素,对其绑定click操作,使其能够复制到想要的代码块到粘贴板
// 因考虑到一篇文章存在多个代码块,故对其进行函数的声明以便多处产出
function CreateCopyNode() {
let elem = document.createElement('div');
let content = document.createTextNode('复制代码块');
elem.appendChild(content);
let elemStyle = {
color: '#3b7d00',
textAlign: 'center',
};
Object.keys(elemStyle).forEach((i) => (elem.style[i] = elemStyle[i]));
elem.setAttribute('id', 'copyScriptCodeOk');
elem.addEventListener('click', function () {
let content = this?.parentNode?.querySelector('code')?.innerText;
copy(content);
elem.innerText = '复制成功';
});
return elem;
}
然后进行拷贝到剪贴板的函数处理
// 使用textarea标签 对其进行剪切板复制操作
function copy(text) {
let textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = text;
textarea.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
}
document.body.removeChild(textarea);
return textarea;
}
接着就是定位每篇文章的各个代码块位置,对其进行嵌入 复制按钮 实现 优雅CV
发现某sdn的dom结构都由原生pre包裹code标签组成对代码块的渲染输出,于是
//直接使用querySelectorAll选择器拿到页面所有pre标签对其进行遍历 嵌入我们产生的 复制按钮
document.querySelectorAll('pre').forEach(function (i) {
i.appendChild(CreateCopyNode());
});
最后将 Copy按钮 样式进行简单微调后 打开浏览器控制台将代码进行输出
然后对代码进行压缩处理
javascript:eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(7(){7 t(){6 c=2.h(\'m\');c.L=\'8/M\';c.K=`#3{J:H;x:I N#j;8-O:r;8-v:T;s:U;G:R;o:0.q}#3:e{s:P;o:0.q;9:"";g:0;k:Q%;V:0;A:F;E:#j}#3:e{A:C%;k:-10%;v:D(B);z-S:-1}#3:b{1j:1e}#3:b:e{g:1g%;k:0}#3:b{x-1f:1d}#3:b:e{g:0%}`;2.l.d(c)}2.1c(\'W\').n(7(i){i.d(p())});7 p(){6 4=2.h(\'1h\');6 9=2.1l(\'复制代码块\');4.d(9);6 f={1k:\'#j\',1i:\'r\',};1b.1a(f).n((i)=>(4.m[i]=f[i]));4.12(\'11\',\'3\');4.Z(\'X\',7(){6 9=Y?.13?.14(\'19\')?.y;a(9);4.y=\'复制成功\'});u 4}7 a(8){6 5=2.h(\'5\');2.l.d(5);5.18=8;5.17();15(2.w(\'a\')){2.w(\'a\')}2.l.16(5);u 5}t()})();',62,84,'||document|copyScriptCodeOk|elem|textarea|let|function|text|content|copy|hover|copyBtnStyle|appendChild|after|elemStyle|width|createElement||3b7d00|left|body|style|forEach|transition|CreateCopyNode|3s|center|position|AddCopyBtnSyle|return|transform|execCommand|border|innerText||height|15deg|120|skewX|background|3px|overflow|20px|2px|padding|innerHTML|type|css|solid|align|absolute|50|hidden|index|uppercase|relative|bottom|pre|click|this|addEventListener||id|setAttribute|parentNode|querySelector|if|removeChild|select|value|code|keys|Object|querySelectorAll|30px|pointer|radius|100|div|textAlign|cursor|color|createTextNode'.split('|'),0,{}))
众所周知,在浏览器的地址栏输入前缀为 javascript: 的代码块,浏览器即可对当前页面进行javascript代码的解析处理,于是我们将 压缩代码 放进收藏夹内,当我们遇到 想非登录复制代码的诉求时,即可对此收藏夹进行引用!
