字符串核对 - (≧∇≦)你又回来了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串比较工具</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #8e8f93fc 100%, #8e8f93fc 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            width: 100%;
            max-width: 800px;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(to right, #514d4d, #514d4d);
            color: white;
            padding: 25px 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 8px;
        }
        
        .subtitle {
            font-size: 16px;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .content {
            padding: 30px;
        }
        
        .input-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            font-weight: 600;
            margin-bottom: 10px;
            color: #2c3e50;
            font-size: 18px;
        }
        
        textarea {
            width: 100%;
            height: 120px;
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            resize: vertical;
            transition: border-color 0.3s;
        }
        
        textarea:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        .example {
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 12px 15px;
            margin-top: 8px;
            border-radius: 0 4px 4px 0;
            font-size: 14px;
        }
        
        .example-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: #2c3e50;
        }
        
        .actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        button {
            padding: 14px 28px;
            font-size: 17px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .compare-btn {
            background: linear-gradient(to right, #35c1a9, #35c1a9);
            color: white;
            flex: 1;
        }
        
        .clear-btn {
            background: #514d4d;
            color: white;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .compare-btn:hover {
            background: linear-gradient(to right, #009a87, #85b536);
        }
        
        .clear-btn:hover {
            background: #c0392b;
        }
        
        .result-container {
            margin-top: 30px;
            padding: 25px;
            border-radius: 10px;
            display: none;
        }
        
        .result-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .result-content {
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
            font-size: 16px;
            line-height: 1.6;
        }
        
        .success {
            background-color: rgba(46, 204, 113, 0.1);
            border: 1px solid #2ecc71;
            color: #27ae60;
        }
        
        .error {
            background-color: rgba(231, 76, 60, 0.1);
            border: 1px solid #e74c3c;
            color: #c0392b;
        }
        
        .icon {
            margin-right: 10px;
            font-size: 24px;
        }
        
        .requirements {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 25px;
        }
        
        .requirements h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .requirements ul {
            padding-left: 20px;
        }
        
        .requirements li {
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 14px;
            border-top: 1px solid #eee;
        }
        
        @media (max-width: 600px) {
            .content {
                padding: 20px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            .actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>字符串比较工具</h1>
            <p class="subtitle">验证格式并比较两个字符串 - 检查第二个字符串是否是第一个字符串的子集</p>
        </header>
        
        <div class="content">
            <div class="input-group">
                <label for="str1">第一个字符串 (蓝本):</label>
                <textarea id="str1" placeholder="请输入第一个字符串，使用英文逗号分隔各项">3SV,实心胎(进口品牌),闪光警示灯,丰田样式悬浮座椅,高挂预滤器,高排气,VM330,3AP</textarea>
                
            </div>
            
            <div class="input-group">
                <label for="str2">第二个字符串 (待比较):</label>
                <textarea id="str2" placeholder="请输入第二个字符串，使用英文逗号分隔各项">3SV,实心胎(进口品牌),闪光警示灯,丰田样式悬浮座椅,高挂预滤器,高排气</textarea>
                
            </div>
            
            <div class="actions">
                <button class="compare-btn" onclick="compareStrings()">
                    <span class="icon">✓</span> 比较字符串
                </button>
                <button class="clear-btn" onclick="clearInputs()">
                    <span class="icon">✕</span> 清空
                </button>
            </div>
            
            <div id="result-container" class="result-container">
                <div class="result-title">
                    <span class="icon" id="result-icon">?</span>
                    <span id="result-title">结果</span>
                </div>
                <div id="result-content" class="result-content"></div>
            </div>
            
            <div class="requirements">
                <h3>字符串要求</h3>
                <ul>
                    <li>只能使用<strong>英文逗号</strong>作为分隔符（不允许中文逗号）</li>
                    <li>字符串中<strong>不允许包含任何空格</strong></li>
                    <li>第二个字符串必须是第一个字符串的<strong>子集</strong></li>
                    <li>所有元素必须<strong>完全匹配</strong>（包括大小写和特殊字符）</li>
                    <li>元素顺序<strong>不影响</strong>比较结果</li>
                </ul>
            </div>
        </div>
        
        
    </div>
    
    <script>
        function compareStrings() {
            const str1 = document.getElementById('str1').value.trim();
            const str2 = document.getElementById('str2').value.trim();
            const resultContainer = document.getElementById('result-container');
            const resultContent = document.getElementById('result-content');
            const resultTitle = document.getElementById('result-title');
            const resultIcon = document.getElementById('result-icon');
            
            // 清空之前的结果
            resultContainer.style.display = 'none';
            
            // 验证字符串1
            const validation1 = validateString(str1, "第一个字符串");
            if (!validation1.isValid) {
                showError(validation1.message, resultContainer, resultContent, resultTitle, resultIcon);
                return;
            }
            
            // 验证字符串2
            const validation2 = validateString(str2, "第二个字符串");
            if (!validation2.isValid) {
                showError(validation2.message, resultContainer, resultContent, resultTitle, resultIcon);
                return;
            }
            
            // 获取元素数组
            const arr1 = str1.split(',');
            const arr2 = str2.split(',');
            
            // 检查第二个字符串是否是第一个字符串的子集
            const missingElements = [];
            for (const element of arr2) {
                if (!arr1.includes(element)) {
                    missingElements.push(element);
                }
            }
            
            // 检查结果并显示
            if (missingElements.length === 0) {
                showSuccess("验证通过！第二个字符串是第一个字符串的子集。", resultContainer, resultContent, resultTitle, resultIcon);
            } else {
                showError(`第二个字符串包含第一个字符串中没有的元素：${missingElements.join(', ')}`, 
                          resultContainer, resultContent, resultTitle, resultIcon);
            }
        }
        
        function validateString(str, strName) {
            // 检查是否为空
            if (str === '') {
                return {
                    isValid: false,
                    message: `${strName}不能为空！`
                };
            }
            
            // 检查是否包含空格
            if (/\s/.test(str)) {
                return {
                    isValid: false,
                    message: `${strName}包含空格！请移除所有空格。`
                };
            }
            
            // 检查是否包含中文逗号
            if (str.includes('，')) {
                return {
                    isValid: false,
                    message: `${strName}包含中文逗号！请使用英文逗号(,)。`
                };
            }
            
            // 检查其他非法符号（只允许中文字符、英文字母、数字、英文逗号和括号）
            const illegalChars = str.match(/[^\u4e00-\u9fa5a-zA-Z0-9,()]/g);
            if (illegalChars && illegalChars.length > 0) {
                const uniqueChars = [...new Set(illegalChars)];
                return {
                    isValid: false,
                    message: `${strName}包含非法字符：${uniqueChars.join('')}`
                };
            }
            
            // 检查连续逗号或开头/结尾逗号
            if (str.startsWith(',') || str.endsWith(',') || str.includes(',,')) {
                return {
                    isValid: false,
                    message: `${strName}格式错误：存在连续逗号或开头/结尾逗号`
                };
            }
            
            return { isValid: true };
        }
        
        function showError(message, container, content, title, icon) {
            container.style.display = 'block';
            container.classList.remove('success');
            container.classList.add('error');
            content.innerHTML = message;
            title.textContent = '验证失败';
            icon.textContent = '✕';
            container.scrollIntoView({ behavior: 'smooth' });
        }
        
        function showSuccess(message, container, content, title, icon) {
            container.style.display = 'block';
            container.classList.remove('error');
            container.classList.add('success');
            content.innerHTML = message;
            title.textContent = '验证通过';
            icon.textContent = '✓';
            container.scrollIntoView({ behavior: 'smooth' });
        }
        
        function clearInputs() {
            document.getElementById('str1').value = '';
            document.getElementById('str2').value = '';
            document.getElementById('result-container').style.display = 'none';
        }
    </script>
</body>
</html>