如何利用油猴脚本,实现幕布网页版的笔记内的查找替换功能?目前幕布网页版仅支持查找功能,而没有笔记替换的选项
// ==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() 来定期检查笔记内容是否发生更改,如果发现匹配项,则进行替换。由于这种方法可能会影响性能,建议在您不需要时禁用脚本。
希望可以采纳!