html本地字符串处理工具｜去重、分割、求交集、求并集

在这里插入图片描述

源代码（保存到本地文件命名为 xxx.html，用浏览器打开该文件即可使用）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>数据处理</title><style>input,textarea {width: 100%;box-sizing: border-box;}button {margin: 5px;}.section {margin-bottom: 15px;border: 1px solid #ccc;padding: 10px;}.output {height: 100px;overflow-y: auto;}.hidden {display: none;}</style>
</head><body><div class="sectionA"><h3>A 的输入界面</h3><textarea id="inputA" rows="3" oninput="hideOutput('A')"></textarea><span style="display: flex; align-items: center;"><p>分割符</p><input type="text" id="splitSymbolA" value="," placeholder="输入分割符，默认为英文逗号" style="width: 50px;"><button id="previewA" onclick="preview('A')">预览</button><select id="formatSelectA" onchange="preview('A')"><option value="1">["a","b"]</option><option value="2">[a,b]</option><option value="3">[a b]</option><option value="4">a\nb</option></select><input type="checkbox" id="removeDuplicatesA" style="margin-left: 10px; width: 30px;" onclick="preview('A')"><label for="removeDuplicates">去重</label><input type="checkbox" id="filterEmptyA" style="margin-left: 10px; width: 30px;" onclick="preview('A')"><label for="filterEmpty">过滤空值</label><input type="checkbox" id="useSplitSymbolA" style="margin-left: 10px; width: 30px;" onclick="preview('A')" checked="true"><label for="useSplitSymbol">使用分隔符</label><input type="checkbox" id="splitByEnterA" style="margin-left: 10px; width: 30px;" onclick="preview('A')"><label for="splitByEnter">回车分割</label><!-- 更多分割符list --><input type="checkbox" id="showSplitByMoreSymbolA" style="margin-left: 10px; width: 30px;" onclick="showSplitByMoreSymbol('A')"><label for="showSplitByMoreSymbol">更多分割符(使用｜分隔)</label></span><input type="text" id="splitByMoreSymbolA" value="" style="display:none;" placeholder="输入分割符，默认为|" style="width: 50px;" onchange="preview('A')"><div class="section outputA" style="display: none;"><span style="display: flex; align-items: center;"><h4>A 输出框</h4> <p id="outputACount"></p></span><textarea id="outputA" readonly style="border: none; background-color: #FFFFCC;"></textarea></div></div><div class="sectionB"><h3>B 的输入界面</h3><textarea id="inputB" rows="3" oninput="hideOutput('B')"></textarea><span style="display: flex; align-items: center;"><p>分割符</p><input type="text" id="splitSymbolB" value="," placeholder="输入分割符，默认为英文逗号" style="width: 50px;"><button id="previewB" onclick="preview('B')">预览</button><select id="formatSelectB" onchange="preview('B')"><option value="1">["a","b"]</option><option value="2">[a,b]</option><option value="3">[a b]</option><option value="4">a\nb</option></select><input type="checkbox" id="removeDuplicatesB" style="margin-left: 10px; width: 30px;" onclick="preview('B')"><label for="removeDuplicates">去重</label><input type="checkbox" id="filterEmptyB" style="margin-left: 10px; width: 30px;" onclick="preview('B')"><label for="filterEmpty">过滤空值</label><input type="checkbox" id="useSplitSymbolB" style="margin-left: 10px; width: 30px;" onclick="preview('B')" checked="true"><label for="useSplitSymbol">使用分隔符</label><input type="checkbox" id="splitByEnterB" style="margin-left: 10px; width: 30px;" onclick="preview('B')"><label for="splitByEnter">回车分割</label><!-- 更多分割符list --><input type="checkbox" id="showSplitByMoreSymbolB" style="margin-left: 10px; width: 30px;" onclick="showSplitByMoreSymbol('B')"><label for="showSplitByMoreSymbol">更多分割符(使用｜分隔)</label></span><input type="text" id="splitByMoreSymbolB" value="" style="display:none;" placeholder="输入分割符，默认为|" style="width: 50px;" onchange="preview('B')"><div class="section outputB" style="display: none;"><span style="display: flex; align-items: center;"><h4>A 输出框</h4> <p id="outputBCount"></p></span><textarea id="outputB" readonly style="border: none; background-color: #FFFFCC;"></textarea></div></div><hr><div class="sectionOut"><h3>AB 之间的数据处理</h3><button id="intersection">求交集(去重)</button><button id="union">求并集(去重)</button><button id="aNotB">求 A 中有 B 中没有(去重)</button><button id="bNotA">求 B 中有 A 中没有(去重)</button></div><div class="sectionResult"><h4>结果</h4><textarea id="inputC" rows="3" placeholder="暂无匹配结果" readonly></textarea></div><span style="display: flex; align-items: center;"><p>分割符</p><input type="text" id="splitSymbolC" value="|" placeholder="输入分割符，默认为|" style="width: 50px;"><button id="previewC" onclick="preview('C')">预览</button><select id="formatSelectC" onchange="preview('C')"><option value="1">["a","b"]</option><option value="2">[a,b]</option><option value="3">[a b]</option><option value="4">a\nb</option></select><input type="checkbox" id="removeDuplicatesC" style="margin-left: 10px; width: 30px;" onclick="preview('C')"><label for="removeDuplicates">去重</label><input type="checkbox" id="filterEmptyC" style="margin-left: 10px; width: 30px;" onclick="preview('C')"><label for="filterEmpty">过滤空值</label><input type="checkbox" id="useSplitSymbolC" style="margin-left: 10px; width: 30px;" onclick="preview('C')" checked="true"><label for="useSplitSymbol">使用分隔符</label><input type="checkbox" id="splitByEnterC" style="margin-left: 10px; width: 30px;" onclick="preview('C')"><label for="splitByEnter">回车分割</label><!-- 更多分割符list --><input type="checkbox" id="showSplitByMoreSymbolC" style="margin-left: 10px; width: 30px;" onclick="showSplitByMoreSymbol('C')"><label for="showSplitByMoreSymbol">更多分割符(使用｜分隔)</label></span><input type="text" id="splitByMoreSymbolC" value="" style="display:none;" placeholder="输入分割符，默认为|" style="width: 50px;" onchange="preview('C')"><div class="section outputC" style="display: none;"><span style="display: flex; align-items: center;"><h4>结果 格式化 输出框</h4> <p id="outputCCount"></p></span><textarea id="outputC" readonly style="border: none; background-color: #FFFFCC;"></textarea></div><script>// 隐藏输出框function hideOutput(opt) {document.getElementById(`output${opt}`).value = "";document.querySelector(`.section.output${opt}`).style.display = 'none';}// 展示showSplitByMoreSymbolfunction showSplitByMoreSymbol(opt) {let showSplitByMoreSymbol = document.getElementById(`showSplitByMoreSymbol${opt}`).checked;if(showSplitByMoreSymbol){document.getElementById(`splitByMoreSymbol${opt}`).style.display = 'block';}else{document.getElementById(`splitByMoreSymbol${opt}`).style.display = 'none';}preview(opt);}// 预览按钮function preview(opt) {let input = document.getElementById(`input${opt}`).value;let format = document.getElementById(`formatSelect${opt}`).value;let splitSymbol = document.getElementById(`splitSymbol${opt}`).value;let removeDuplicates = document.getElementById(`removeDuplicates${opt}`).checked;let filterEmpty = document.getElementById(`filterEmpty${opt}`).checked;let splitByEnter = document.getElementById(`splitByEnter${opt}`).checked;let useSplitSymbol = document.getElementById(`useSplitSymbol${opt}`).checked;let showSplitByMoreSymbol = document.getElementById(`showSplitByMoreSymbol${opt}`).checked;let splitByMoreSymbol = document.getElementById(`splitByMoreSymbol${opt}`).value;console.log('input', input,'format', format,'splitSymbol', splitSymbol,'removeDuplicates', removeDuplicates,'filterEmpty', filterEmpty,'splitByEnter', splitByEnter,'useSplitSymbol', useSplitSymbol);const separators = []; // 存储所有可能的分隔符// 使用回车分割if(splitByEnter){separators.push(/\n/g);}// 使用分隔符分割if(useSplitSymbol){separators.push(splitSymbol);}// 使用跟多分割符if(showSplitByMoreSymbol){splitByMoreSymbol.split('|').forEach(symbol => {if(symbol){separators.push(symbol);}})}// 开始分割let parts;if (separators.length > 0) {parts = separators.reduce((acc, separator) => {return acc.reduce((subAcc, subStr) => {return subAcc.concat(subStr.split(separator));}, []);}, [input]);} else {parts = separators.length > 0 ? input.split(separators.join('|')) : [input];}// console.log('parts', parts);if (removeDuplicates) {parts = Array.from(new Set(parts));}// console.log('parts', parts);if (filterEmpty) {parts = parts.filter(p => p.trim() !== '');}console.log(`parts${opt}`, parts);document.getElementById(`output${opt}Count`).innerText = `  (${parts.length}个)`;let result = '';if (format === '1') {result = JSON.stringify(parts.map(p => p.trim()));} else if (format === '2') {result = '[' + parts.map(p => p.trim()).join(',') + ']';} else if (format === '3') {result = '[' + parts.join(' ') + ']';} else if (format === '4') {result = parts.join('\n');}document.getElementById(`output${opt}`).value = result;document.querySelector(`.section.output${opt}`).style.display = 'block';return parts;}function getParts(opt) {if(opt==='A'){return preview('A');}if(opt==='B'){return preview('B');}return [];}document.getElementById('intersection').addEventListener('click', function () {let partsA = getParts('A');let partsB = getParts('B');let intersection = Array.from(partsA).filter(x => partsB.includes(x));document.getElementById('inputC').value = intersection.join('|'); console.log('intersection', intersection);});document.getElementById('union').addEventListener('click', function () {let partsA = getParts('A');let partsB = getParts('B');let union = Array.from(new Set([...partsA, ...partsB]));document.getElementById('inputC').value = union.join('|');console.log('union', union);});document.getElementById('aNotB').addEventListener('click', function () {let partsA = getParts('A');let partsB = getParts('B');let aNotB = Array.from(partsA).filter(x => !partsB.includes(x));document.getElementById('inputC').value = aNotB.join('|');console.log('aNotB', aNotB);});document.getElementById('bNotA').addEventListener('click', function () {let partsA = getParts('A');let partsB = getParts('B');let bNotA = Array.from(partsB).filter(x => !partsA.includes(x));document.getElementById('inputC').value = bNotA.join('|');console.log('bNotA', bNotA);});</script>
</body></html>

配置到油猴脚本

将上述html代码放到 newWindow.document.write 中即可。

// ==UserScript==
// @name         Open Webpage from Menu
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Open a new webpage from a menu command
// @author       You
// @match        *://*/*
// @grant        GM_registerMenuCommand
// ==/UserScript==(function() {'use strict';// 使用 GM_registerMenuCommand 注册一个菜单命令GM_registerMenuCommand("Open My Webpage", function() {// 当用户点击菜单命令时，使用 window.open 打开一个新的网页// 这里将 'https://example.com' 替换为你想要打开的网页的 URLwindow.open('https://example.com', '_blank');});
})();

或者

// ==UserScript==
// @name         Open HTML in Window
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Open a window with custom HTML
// @author       You
// @match        *://*/*
// @grant        GM_registerMenuCommand
// ==/UserScript==(function() {'use strict';GM_registerMenuCommand("Open My HTML", function() {let htmlCode = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>My Custom Page</title></head><body><h1>Hello, World!</h1><p>This is a custom HTML page opened via Tampermonkey script.</p></body></html>`;let newWindow = window.open('', '_blank');newWindow.document.write(htmlCode);});
})();