当前位置：首页 > article >正文

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

article 2025/1/5 11:56:46

在这里插入图片描述

源代码（保存到本地文件命名为 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';
        }

        // 展示showSplitByMoreSymbol
        function 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' 替换为你想要打开的网页的 URL
        window.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);
    });
})();