破JSON工具站

文本比对工具

专业的文本差异比较工具

行: 0 | 字符: 0
行: 0 | 字符: 0

文本比对工具

专业的文本比对工具，支持JSON、XML、Markdown等多种格式的文本比较。提供语法高亮和差异高亮，帮助您快速发现文本差异，提高工作效率。支持忽略空白字符、大小写敏感等高级比对选项。

差异高亮 语法高亮 多格式支持 实时比对
应用场景：代码审查、文档对比、配置文件比较、API响应验证、数据迁移检查、版本控制、调试分析、质量保证
background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 20px; font-size: 12px; font-weight: 500; color: #475569; } .stats-badge i { margin-right: 6px; font-size: 10px; } /* 差异导航 */ .diff-navigation { display: flex; align-items: center; gap: 8px; margin-right: 12px; padding: 4px 8px; background: rgba(59, 130, 246, 0.1); border-radius: 6px; border: 1px solid rgba(59, 130, 246, 0.2); } .nav-btn { background: #3b82f6; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s ease; min-width: 50px; } .nav-btn:hover:not(:disabled) { background: #2563eb; transform: translateY(-1px); } .nav-btn:disabled { background: #9ca3af; cursor: not-allowed; transform: none; } .diff-counter { font-size: 12px; font-weight: 600; color: #3b82f6; min-width: 40px; text-align: center; } /* 动画类 - 已移至全局CSS */ /* 响应式设计 */ @media (max-width: 768px) { .diff-container { font-size: 12px; max-height: 400px; } .diff-line-number { width: 35px; margin-right: 8px; } } /* 滚动条样式 */ .diff-container::-webkit-scrollbar { width: 8px; height: 8px; } .diff-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .diff-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .diff-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* 加载动画 */ .loading-spinner { border: 3px solid #f3f4f6; border-top: 3px solid #3b82f6; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 弹层动画 */ #compareModal { transition: opacity 0.3s ease-in-out; } #compareModal.hidden { opacity: 0; pointer-events: none; } #compareModal:not(.hidden) { opacity: 1; } #compareModal .bg-white { transform: scale(0.9); transition: transform 0.3s ease-in-out; } #compareModal:not(.hidden) .bg-white { transform: scale(1); } /* 弹层内容样式 */ #modalDiffContainer { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; line-height: 1.5; } #modalDiffContainer .diff-line { padding: 2px 8px; border-radius: 4px; margin: 1px 0; white-space: pre-wrap; word-break: break-all; } #modalDiffContainer .diff-added { background: #dcfce7; color: #166534; border-left: 3px solid #22c55e; } #modalDiffContainer .diff-removed { background: #fef2f2; color: #991b1b; border-left: 3px solid #ef4444; } #modalDiffContainer .diff-modified { background: #fef3c7; color: #92400e; border-left: 3px solid #f59e0b; } #modalDiffContainer .diff-unchanged { background: #f8fafc; color: #374151; } #modalDiffContainer .diff-line-number { display: inline-block; width: 50px; margin-right: 12px; color: #6b7280; font-weight: 500; text-align: right; user-select: none; }