论坛发帖时替换 Markdown 中图片的本地链接为附件链接

LoveCode

更新：
调整了帖子内容，以及修改了代码，可以适用于：发帖、回帖等。

---

缘起

突破练气二层对我等散修确实困难无比，更何况我资质一般、气运浅薄。而如今筑基修士遍地走，一想到这里便心境不稳，险些入了魔。先静下心，解决一些小问题再修炼也不迟。

郑重说明：我对吾爱论坛非常满意！！！本次是为了提升以后的发帖体验而写的脚本。

之前发帖子都使用 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("还没有上传图片呢");
        }
    });
})();