如何利用油猴脚本,实现幕布网页版的笔记内的查找替换功能?

如何利用油猴脚本,实现幕布网页版的笔记内的查找替换功能?目前幕布网页版仅支持查找功能,而没有笔记替换的选项


// ==UserScript==
// @name         幕布笔记查找替换工具
// @namespace    http://tampermonkey
// @version      1
// @description  在幕布笔记中添加查找替换功能
// @match        https://mubu.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 为了避免重复按键,用一个 flag 来判断是否已经打开了查找框
    var isFindOpen = false;

    function addFindReplaceBox() {
        // 如果已经打开了查找框,则不再执行此函数
        if (isFindOpen) {
            return;
        }

        // 创建查找框元素
        var findBox = document.createElement('div');
        findBox.id = 'find-box';
        findBox.innerHTML = `
            <input type="text" placeholder="查找">
            <input type="text" placeholder="替换">
            <button id="find-next-btn">下一个</button>
            <button id="replace-btn">替换</button>
            <button id="replace-all-btn">全部替换</button>
            <button id="close-btn">关闭</button>
        `;

        // 设置查找框样式
        findBox.style.position = 'fixed';
        findBox.style.top = '10px';
        findBox.style.right = '10px';
        findBox.style.border = '1px solid #ccc';
        findBox.style.backgroundColor = '#fff';
        findBox.style.padding = '10px';

        // 将查找框添加到文档中
        document.body.appendChild(findBox);

        // 绑定事件
        var inputList = findBox.getElementsByTagName('input');
        var findNextBtn = document.getElementById('find-next-btn');
        var replaceBtn = document.getElementById('replace-btn');
        var replaceAllBtn = document.getElementById('replace-all-btn');
        var closeBtn = document.getElementById('close-btn');

        // 查找下一个匹配项
        findNextBtn.addEventListener('click', function() {
            var findText = inputList[0].value;
            if (findText) {
                var selObj = window.getSelection();
                if (selObj.rangeCount && selObj.focusOffset) {
                    var range = selObj.getRangeAt(0);
                    var selText = range.toString();
                    if (selText === findText) {
                        range.collapse(false);
                    }
                }

                var regex = new RegExp(findText, 'gi');
                var match = regex.exec(document.body.innerHTML);
                if (match) {
                    var elem = document.createRange();
                    elem.setStart(document.body.firstChild, match.index);
                    elem.setEnd(document.body.firstChild, match.index + match[0].length);
                    selObj.removeAllRanges();
                    selObj.addRange(elem);
                } else {
                    alert('未找到匹配项');
                }
            }
        });

        // 替换当前匹配项
        replaceBtn.addEventListener('click', function() {
            var findText = inputList[0].value;
            var replaceText = inputList[1].value;
            if (findText && replaceText) {
                var selObj = window.getSelection();
                if (selObj.rangeCount && selObj.focusOffset) {
                    var range = selObj.getRangeAt(0);
                    var selText = range.toString();
                    if (selText === findText) {
                        range.deleteContents();
                        range.insertNode(document.createTextNode(replaceText));
                    }
                }

                document.body.innerHTML = document.body.innerHTML.replace(new RegExp(findText, 'g'), replaceText);
            }
        });

        // 替换所有匹配项
        replaceAllBtn.addEventListener('click', function() {
            var findText = inputList[0].value;
            var replaceText = inputList[1].value;
            if (findText && replaceText) {
                document.body.innerHTML = document.body.innerHTML.replace(new RegExp(findText, 'g'), replaceText);
}
});

    // 关闭查找框
    closeBtn.addEventListener('click', function() {
        isFindOpen = false;
        findBox.remove();
    });

    // 设置 flag
    isFindOpen = true;

    // 聚焦到查找输入框
    inputList[0].focus();
}

// 监听快捷键
document.addEventListener('keydown', function(event) {
    if (event.key === 'f' && event.ctrlKey) {
        event.preventDefault();
        addFindReplaceBox();
    }
});
})();

在幕布网页版笔记中按下“Ctrl + F”快捷键即可打开查找替换框


// ==UserScript==
// @name         Mubu Find and Replace
// @namespace    MubuFindReplace
// @version      1.0
// @description  Add find and replace functionality in Mubu web app
// @author       Your name here
// @match        https://mubu.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.placeholder = 'Search';
    searchInput.style = 'position: fixed; top: 10px; left: 50px; z-index: 9999;';
    document.body.appendChild(searchInput);

    const replaceInput = document.createElement('input');
    replaceInput.type = 'text';
    replaceInput.placeholder = 'Replace';
    replaceInput.style = 'position: fixed; top: 50px; left: 50px; z-index: 9999;';
    document.body.appendChild(replaceInput);

    let searchText = '';
    let replaceText = '';

    searchInput.addEventListener('input', () => {
        searchText = searchInput.value.trim();
    });

    replaceInput.addEventListener('input', () => {
        replaceText = replaceInput.value.trim();
    });

    document.addEventListener('keydown', (event) => {
        if (event.ctrlKey && event.key === 'f') {
            searchInput.focus();
        } else if (event.ctrlKey && event.key === 'r') {
            replaceInput.focus();
        }
    });

    setInterval(() => {
        const note = document.querySelector('.ql-editor');
        if (!note) return;

        const html = note.innerHTML;
        const newHtml = html.replace(new RegExp(searchText, 'gm'), replaceText);
        if (newHtml !== html) {
            note.innerHTML = newHtml;
        }
    }, 1000);
})();

在幕布网页版打开一个笔记,可以看到两个输入框在屏幕左上角,分别用于搜索和替换。在其中一个输入框中输入要搜索或替换的文本,即可实现相应功能。该脚本使用 setInterval() 来定期检查笔记内容是否发生更改,如果发现匹配项,则进行替换。由于这种方法可能会影响性能,建议在您不需要时禁用脚本。
希望可以采纳!