更新:
调整了帖子内容,以及修改了代码,可以适用于:发帖、回帖等。
缘起
突破练气二层对我等散修确实困难无比,更何况我资质一般、气运浅薄。而如今筑基修士遍地走,一想到这里便心境不稳,险些入了魔。先静下心,解决一些小问题再修炼也不迟。
郑重说明:我对吾爱论坛非常满意!!!本次是为了提升以后的发帖体验而写的脚本。
之前发帖子都使用 Typora
编写 Markdown
,且所用到的图片都保存在本地。发帖时需要将文件上传到论坛、手动进行链接替换,其过程如论坛演示:论坛操作问题 - 我如何实现发帖时图文混排效果。
如上,我需要手动地、将文字内容中的本地图片链接替换成文件上传后的链接,非常麻烦,尤其是我上次写文章时有好多张图片,当时我就……略感疲惫。
我在论坛上搜索也没有找到解决这个问题的方法,估计大家用的是 “图床”,不过既然论坛可以上传图片,那我还是想办法解决这一问题。
所以有了此次的小脚本。当然限于水平,脚本可能还存在一些 BUG 或者其它的问题,欢迎大家补充。
此外,在替换之后最好取消纯文本模式,看一看图片是否正确,因为脚本可能有 BUG、网站以后可能会变动等等。
效果展示
发布本帖子时就用到了该工具哟。
源码
辨别本地图片的链接格式 使用的是正则表达式,它匹配以 ! 开头的内容(并忽略开头的空格),所以在 Markdown 中插入图片时应该让链接保持一行。
另外可以使用油猴插件来运行该脚本哟。
// ==UserScript==
// @name 吾爱破解发帖时快速替换本地图片的链接
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.52pojie.cn/forum.php?mod=post&action=newthread*
// @match https://www.52pojie.cn/forum.php?mod=post&action=reply*
// @match https://www.52pojie.cn/forum.php?mod=post&action=edit*
// @icon https://www.google.com/s2/favicons?sz=64&domain=52pojie.cn
// @grant none
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
/**
* 获取已上传的图片的 ImageName、和其 ImageID 的对应关系
*/
function get_imageName_to_imageID() {
// 存储二者的映射关系
let imageName_to_imageID = new Map();
// 先获取对应的 td 标签下的 a 标签,然后遍历、提取信息
const temp = document.querySelectorAll("#imgattachlist > .imgl td[id]:not([class]) > a");
temp.forEach(item => {
// title 形如 image-20231024140819518.png
// 为了后续正则替换能方便不少,所以删除文件名后缀
const image_name = item.title.substring(0, item.title.lastIndexOf("."));
// 其 id 形如 imageattach2651310,需要取后面的数字部分
const image_id = item.id.substring(11);
imageName_to_imageID.set(image_name, image_id);
});
console.log(imageName_to_imageID);
return imageName_to_imageID;
}
/**
* 根据 ImageName、和其 ImageID 的对应关系,进行文本替换
* @param {Map} imageName_to_imageID
*/
function replace_localImageURL_to_imageIDType(imageName_to_imageID) {
let textarea = document.querySelector("#e_textarea");
/** @type {string} */
const content = textarea.value;
if (content === "") {
alert("编辑器中并没有内容!");
}
// 图片格式为 ![image-20231024140819518](test.assets/image-20231024140819518.png)
// 下面的分组就是提取出 [T] 中的内容 T
const reg = /^(?:\s*!|!)\[(.*?)\].*?\)/gm;
// 开始逐一处理,根据匹配到的 image_name 进行文本替换
let count_for_not_replaced = 0 // 记录没有被处理的本地链接
textarea.value = content.replaceAll(reg, (s, image_name) => {
if (imageName_to_imageID.has(image_name)) {
return `\n[attachimg]${imageName_to_imageID.get(image_name)}[/attachimg]\n`;
} else {
// console.warn(`文件 ${image_name} 并没有上传!`);
count_for_not_replaced++;
return s;
}
});
if (count_for_not_replaced !== 0) {
alert(`还有 ${count_for_not_replaced} 个本地图片链接没有被替换哟~`)
} else {
alert("替换完成!");
}
}
/**
* 添加一个按钮用于执行替换操作
*/
function create_replace_button() {
let btn = document.createElement("button");
let info = document.createElement("strong");
info.textContent = "替换本地图片链接";
btn.append(info);
// 直接使用 "确定" 按钮的 css 样式
btn.classList.add("pn", "pnc");
// 稍作修改
btn.style.marginRight = "10px";
// 添加到指定的位置
document.querySelector("#e_imgattachlist div.o")?.prepend(btn);
return btn;
}
// 主代码
let replace_btn = create_replace_button();
replace_btn.addEventListener("click", e => {
let imageName_to_imageID = get_imageName_to_imageID();
if (imageName_to_imageID.size !== 0) {
replace_localImageURL_to_imageIDType(imageName_to_imageID);
} else {
alert("还没有上传图片呢");
}
});
})();