在日常编码、写作、编辑资料或处理表格内容的过程中,我们经常会遇到一个非常常见但又容易被忽略的问题——文本的大小写格式不统一。有时候我们从网页上复制一段文字,有的是全大写、有的是全小写,还有些是首字母大小写混乱,看起来非常杂乱,不仅影响阅读,也不利于后续的排版与展示。而如果手动一个个修改,不仅枯燥,还容易出错。
为了处理这种琐碎但常见的需求,我们专门设计了一个小巧实用的工具:文本大小写转换器。它的目标很简单——一键转换文本大小写格式,让所有操作变得轻松、便捷、高效。
功能介绍:三种转换,一键搞定
这个工具的核心功能其实非常直白,正因为它专注、聚焦,所以用起来也格外顺手。目前支持的三种常用转换方式如下:
1. 全小写转换(lowercase)
将所有文本中的字母统一转换为小写格式,适用于需要统一命名风格(如变量名、文件名等)的场景。无论你粘贴进来的是大写、小写还是混合格式,一键点击后,所有英文字母都会变成小写,清爽整洁。
除了这三种主要模式,后续还可以拓展一些实用子功能,比如“句子首字母大写”、“驼峰命名法(camelCase)”、“蛇形命名(snake_case)”等,甚至根据语言环境智能判断格式要求,适应多种使用场景。
与 通义灵码的中文交互指令
为了进一步提升体验,我们还为这项功能配套了中文指令,让你在使用 通义灵码时可以像聊天一样进行交互,快速执行转换操作。以下是几条常用的中文指令示例:
使用HTML和JS实现文本大小写转换器:支持全小写、全大写、首字母大写等一键转换。
通义灵码在接收到这些自然语言指令后,会自动识别要操作的文本段,并执行相应的转换操作。
使用 EdgeOne Pages MCP 发布
因为我们的智能体中使用了 EdgeOne Pages MCP,生成工具后,会通过MCP实现自动部署;
当前端开发完成后,智能体就是将应用部署到一个公开的域名上,方便用户访问。腾讯云提供了一个非常方便的工具——EdgeOne Pages,它允许我们将 页面轻松发布并生成一个公开的 URL 地址。
- 将 项目通过 EdgeOne Pages 部署,几秒钟内就能获得一个公开的链接。
- 使用生成的链接,访问我们的页面,查看实际效果。
通过这个过程,用户就能够轻松 使用,并通过公开的链接访问。别让格式拖慢你的效率
虽然文本大小写看似是个不起眼的小问题,但实际工作中处理这类琐碎内容往往最消耗精力。通过 Trae 提供的“文本大小写转换器”,你可以用最简单的方式,快速实现文字格式的统一与规范,让注意力真正集中在内容本身、而不是格式上。
这种小工具,不一定花哨,但用起来舒服。它既适合写文案的你,也适合整理表格的你,更适合写代码的你。你会发现,把一件小事做到极致,本身就是一种高效的体现。
<!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> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; position: relative; overflow-x: hidden; } /* 动态背景粒子 */ .bg-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .particle { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } .container { max-width: 1200px; margin: 0 auto; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); overflow: hidden; } .header { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 30px; text-align: center; position: relative; } .header h1 { font-size: 2.5em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .header p { font-size: 1.1em; opacity: 0.9; } .main-content { padding: 40px; } .conversion-area { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; } .input-section, .output-section { background: #f8f9fa; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .section-title { font-size: 1.3em; font-weight: bold; margin-bottom: 15px; color: #333; display: flex; align-items: center; gap: 10px; } .textarea { width: 100%; height: 300px; border: 2px solid #ddd; border-radius: 10px; padding: 15px; font-size: 16px; font-family: 'Courier New', monospace; resize: vertical; transition: border-color 0.3s ease; background: white; } .textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 10px rgba(102, 126, 234, 0.2); } .controls-panel { background: #f8f9fa; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 30px; } .conversion-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; } .convert-btn { padding: 15px 20px; border: none; border-radius: 10px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .convert-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } .convert-btn:active { transform: translateY(0); } .convert-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .convert-btn:hover::before { left: 100%; } .special-functions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 30px; } .special-btn { padding: 12px 18px; border: 2px solid #667eea; border-radius: 8px; background: transparent; color: #667eea; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .special-btn:hover { background: #667eea; color: white; transform: scale(1.05); } .stats-panel { background: #e9ecef; border-radius: 10px; padding: 20px; margin-bottom: 30px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; } .stat-item { text-align: center; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .stat-number { font-size: 2em; font-weight: bold; color: #667eea; display: block; } .stat-label { font-size: 0.9em; color: #666; margin-top: 5px; } .utility-buttons { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; } .utility-btn { padding: 10px 20px; border: 1px solid #ccc; border-radius: 25px; background: white; color: #666; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .utility-btn:hover { background: #667eea; color: white; border-color: #667eea; } .history-panel { background: #f8f9fa; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); max-height: 300px; overflow-y: auto; } .history-item { background: white; border-radius: 8px; padding: 15px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s ease; border-left: 4px solid #667eea; } .history-item:hover { transform: translateX(5px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .history-type { font-weight: bold; color: #667eea; font-size: 0.9em; } .history-text { margin-top: 5px; color: #666; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-mode { background: #e3f2fd; border: 2px dashed #2196f3; border-radius: 10px; padding: 20px; margin-bottom: 20px; text-align: center; } .preview-text { font-size: 1.2em; color: #1976d2; font-weight: bold; } .toast { position: fixed; top: 20px; right: 20px; background: #4caf50; color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transform: translateX(400px); transition: transform 0.3s ease; z-index: 1000; } .toast.show { transform: translateX(0); } @media (max-width: 768px) { .conversion-area { grid-template-columns: 1fr; gap: 20px; } .main-content { padding: 20px; } .header h1 { font-size: 2em; } .conversion-buttons { grid-template-columns: 1fr; } } /* 自定义滚动条 */ .history-panel::-webkit-scrollbar { width: 6px; } .history-panel::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .history-panel::-webkit-scrollbar-thumb { background: #667eea; border-radius: 3px; } .character-count { font-size: 0.9em; color: #666; margin-top: 10px; text-align: right; } .mode-indicator { display: inline-block; padding: 4px 8px; background: #667eea; color: white; border-radius: 4px; font-size: 0.8em; margin-left: 10px; } </style> </head> <body> <div class="bg-particles" id="particles"></div> <div class="container"> <div class="header"> <h1>🔄 智能文本大小写转换器</h1> <p>支持多种转换模式,智能识别,一键转换文本格式</p> </div> <div class="main-content"> <div class="conversion-area"> <div class="input-section"> <div class="section-title"> 📝 输入文本 <span class="mode-indicator" id="modeIndicator">实时模式</span> </div> <textarea id="inputText" class="textarea" placeholder="在此输入需要转换的文本...支持中英文混排处理" oninput="handleInput()" onpaste="handlePaste()" ></textarea> <div class="character-count" id="inputCount">字符数: 0</div> </div> <div class="output-section"> <div class="section-title"> ✨ 转换结果 <button class="utility-btn" onclick="copyOutput()" style="margin-left: auto;"> 📋 复制结果 </button> </div> <textarea id="outputText" class="textarea" readonly placeholder="转换结果将在此显示..." ></textarea> <div class="character-count" id="outputCount">字符数: 0</div> </div> </div> <div class="controls-panel"> <div class="section-title">🛠️ 转换操作</div> <div class="conversion-buttons"> <button class="convert-btn" onclick="convertCase('lowercase')" title="将所有字母转为小写"> 🔤 全小写 (lowercase) </button> <button class="convert-btn" onclick="convertCase('uppercase')" title="将所有字母转为大写"> 🔠 全大写 (UPPERCASE) </button> <button class="convert-btn" onclick="convertCase('capitalize')" title="每个单词首字母大写"> 🎯 首字母大写 (Capitalize) </button> <button class="convert-btn" onclick="convertCase('sentence')" title="句子首字母大写"> 📝 句式大写 (Sentence case) </button> <button class="convert-btn" onclick="convertCase('camelcase')" title="驼峰命名法"> 🐫 驼峰式 (camelCase) </button> <button class="convert-btn" onclick="convertCase('pascalcase')" title="帕斯卡命名法"> 🏛️ 帕斯卡式 (PascalCase) </button> <button class="convert-btn" onclick="convertCase('snakecase')" title="下划线命名法"> 🐍 蛇形式 (snake_case) </button> <button class="convert-btn" onclick="convertCase('kebabcase')" title="短横线命名法"> 🍢 烤串式 (kebab-case) </button> </div> <div class="special-functions"> <button class="special-btn" onclick="convertCase('inverse')" title="大小写反转"> 🔄 大小写反转 </button> <button class="special-btn" onclick="convertCase('alternating')" title="交替大小写"> 🎪 交替大小写 </button> <button class="special-btn" onclick="convertCase('random')" title="随机大小写"> 🎲 随机大小写 </button> <button class="special-btn" onclick="removeSpaces()" title="移除所有空格"> 🚫 移除空格 </button> <button class="special-btn" onclick="removeExtraSpaces()" title="移除多余空格"> ✂️ 清理空格 </button> <button class="special-btn" onclick="addSpaces()" title="在每个字符间添加空格"> ➕ 添加空格 </button> </div> </div> <div class="stats-panel"> <div class="section-title">📊 文本统计</div> <div class="stats-grid"> <div class="stat-item"> <span class="stat-number" id="charCount">0</span> <div class="stat-label">总字符数</div> </div> <div class="stat-item"> <span class="stat-number" id="wordCount">0</span> <div class="stat-label">单词数</div> </div> <div class="stat-item"> <span class="stat-number" id="lineCount">0</span> <div class="stat-label">行数</div> </div> <div class="stat-item"> <span class="stat-number" id="upperCount">0</span> <div class="stat-label">大写字母</div> </div> <div class="stat-item"> <span class="stat-number" id="lowerCount">0</span> <div class="stat-label">小写字母</div> </div> <div class="stat-item"> <span class="stat-number" id="numberCount">0</span> <div class="stat-label">数字</div> </div> </div> </div> <div class="utility-buttons"> <button class="utility-btn" onclick="clearAll()">🗑️ 清空所有</button> <button class="utility-btn" onclick="swapTexts()">🔄 交换文本</button> <button class="utility-btn" onclick="togglePreviewMode()">👁️ 预览模式</button> <button class="utility-btn" onclick="downloadResult()">💾 下载结果</button> <button class="utility-btn" onclick="toggleRealTimeMode()">⚡ 实时转换</button> <button class="utility-btn" onclick="showHelp()">❓ 使用帮助</button> </div> <div class="history-panel"> <div class="section-title">📚 转换历史</div> <div id="historyContainer"> <div style="text-align: center; color: #999; padding: 20px;"> 暂无转换历史 </div> </div> </div> </div> </div> <div id="toast" class="toast"></div> <script> // 全局变量 let isRealTimeMode = true; let isPreviewMode = false; let conversionHistory = []; // 初始化 document.addEventListener('DOMContentLoaded', function() { createParticles(); loadHistory(); updateStats(); }); // 创建背景粒子 function createParticles() { const container = document.getElementById('particles'); const particleCount = 30; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.className = 'particle'; const size = Math.random() * 8 + 3; particle.style.width = size + 'px'; particle.style.height = size + 'px'; particle.style.left = Math.random() * 100 + '%'; particle.style.top = Math.random() * 100 + '%'; particle.style.animationDelay = Math.random() * 6 + 's'; particle.style.animationDuration = (Math.random() * 4 + 4) + 's'; container.appendChild(particle); } } // 输入处理 function handleInput() { updateStats(); updateCharacterCount(); if (isRealTimeMode) { // 在实时模式下,延迟执行转换以避免频繁操作 clearTimeout(window.inputTimeout); window.inputTimeout = setTimeout(() => { const lastConversion = localStorage.getItem('lastConversion'); if (lastConversion) { convertCase(lastConversion); } }, 300); } } // 粘贴处理 function handlePaste() { setTimeout(() => { handleInput(); showToast('文本已粘贴'); }, 100); } // 大小写转换核心函数 function convertCase(type) { const input = document.getElementById('inputText').value; if (!input.trim()) { showToast('请先输入文本', 'warning'); return; } let result = ''; switch (type) { case 'lowercase': result = input.toLowerCase(); break; case 'uppercase': result = input.toUpperCase(); break; case 'capitalize': result = input.replace(/\b\w+/g, word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() ); break; case 'sentence': result = input.toLowerCase().replace(/(^\s*\w|[.!?]\s*\w)/g, match => match.toUpperCase() ); break; case 'camelcase': result = input.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => index === 0 ? word.toLowerCase() : word.toUpperCase() ).replace(/\s+/g, ''); break; case 'pascalcase': result = input.replace(/(?:^\w|[A-Z]|\b\w)/g, word => word.toUpperCase() ).replace(/\s+/g, ''); break; case 'snakecase': result = input.toLowerCase().replace(/\s+/g, '_'); break; case 'kebabcase': result = input.toLowerCase().replace(/\s+/g, '-'); break; case 'inverse': result = input.split('').map(char => char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase() ).join(''); break; case 'alternating': result = input.split('').map((char, index) => index % 2 === 0 ? char.toLowerCase() : char.toUpperCase() ).join(''); break; case 'random': result = input.split('').map(char => Math.random() > 0.5 ? char.toUpperCase() : char.toLowerCase() ).join(''); break; default: result = input; } document.getElementById('outputText').value = result; updateCharacterCount(); addToHistory(type, input, result); localStorage.setItem('lastConversion', type); showToast(`已转换为${getConversionName(type)}`); } // 特殊功能 function removeSpaces() { const input = document.getElementById('inputText').value; const result = input.replace(/\s/g, ''); document.getElementById('outputText').value = result; updateCharacterCount(); showToast('已移除所有空格'); } function removeExtraSpaces() { const input = document.getElementById('inputText').value; const result = input.replace(/\s+/g, ' ').trim(); document.getElementById('outputText').value = result; updateCharacterCount(); showToast('已清理多余空格'); } function addSpaces() { const input = document.getElementById('inputText').value; const result = input.split('').join(' '); document.getElementById('outputText').value = result; updateCharacterCount(); showToast('已在字符间添加空格'); } // 工具函数 function getConversionName(type) { const names = { 'lowercase': '全小写', 'uppercase': '全大写', 'capitalize': '首字母大写', 'sentence': '句式大写', 'camelcase': '驼峰式', 'pascalcase': '帕斯卡式', 'snakecase': '蛇形式', 'kebabcase': '烤串式', 'inverse': '大小写反转', 'alternating': '交替大小写', 'random': '随机大小写' }; return names[type] || type; } // 更新统计信息 function updateStats() { const text = document.getElementById('inputText').value; document.getElementById('charCount').textContent = text.length; document.getElementById('wordCount').textContent = text.trim() ? text.trim().split(/\s+/).length : 0; document.getElementById('lineCount').textContent = text ? text.split('\n').length : 0; document.getElementById('upperCount').textContent = (text.match(/[A-Z]/g) || []).length; document.getElementById('lowerCount').textContent = (text.match(/[a-z]/g) || []).length; document.getElementById('numberCount').textContent = (text.match(/[0-9]/g) || []).length; } // 更新字符计数 function updateCharacterCount() { const input = document.getElementById('inputText').value; const output = document.getElementById('outputText').value; document.getElementById('inputCount').textContent = `字符数: ${input.length}`; document.getElementById('outputCount').textContent = `字符数: ${output.length}`; } // 历史记录管理 function addToHistory(type, input, output) { const historyItem = { type: type, typeName: getConversionName(type), input: input.substring(0, 100), output: output.substring(0, 100), timestamp: new Date().toLocaleString() }; conversionHistory.unshift(historyItem); if (conversionHistory.length > 10) { conversionHistory.pop(); } updateHistoryDisplay(); saveHistory(); } function updateHistoryDisplay() { const container = document.getElementById('historyContainer'); if (conversionHistory.length === 0) { container.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">暂无转换历史</div>'; return; } container.innerHTML = conversionHistory.map((item, index) => ` <div class="history-item" onclick="restoreFromHistory(${index})"> <div class="history-type">${item.typeName} - ${item.timestamp}</div> <div class="history-text">输入: ${item.input}${item.input.length > 100 ? '...' : ''}</div> </div> `).join(''); } function restoreFromHistory(index) { const item = conversionHistory[index]; // 这里我们只能恢复原始输入,因为我们只保存了截断的版本 // 在实际应用中,你可能想要保存完整的文本 showToast('历史记录功能:点击可查看转换详情'); } function saveHistory() { localStorage.setItem('conversionHistory', JSON.stringify(conversionHistory)); } function loadHistory() { const saved = localStorage.getItem('conversionHistory'); if (saved) { conversionHistory = JSON.parse(saved); updateHistoryDisplay(); } } // 实用功能 function copyOutput() { const output = document.getElementById('outputText'); if (!output.value.trim()) { showToast('没有可复制的内容', 'warning'); return; } output.select(); document.execCommand('copy'); showToast('结果已复制到剪贴板'); } function clearAll() { document.getElementById('inputText').value = ''; document.getElementById('outputText').value = ''; updateStats(); updateCharacterCount(); showToast('已清空所有内容'); } function swapTexts() { const input = document.getElementById('inputText'); const output = document.getElementById('outputText'); const temp = input.value; input.value = output.value; output.value = temp; updateStats(); updateCharacterCount(); showToast('文本已交换'); } function togglePreviewMode() { isPreviewMode = !isPreviewMode; const button = event.target; if (isPreviewMode) { button.textContent = '👁️ 退出预览'; button.style.background = '#ff9800'; showToast('预览模式已开启'); } else { button.textContent = '👁️ 预览模式'; button.style.background = ''; showToast('预览模式已关闭'); } } function downloadResult() { const content = document.getElementById('outputText').value; if (!content.trim()) { showToast('没有可下载的内容', 'warning'); return; } const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'converted_text.txt'; a.click(); URL.revokeObjectURL(url); showToast('文件下载已开始'); } function toggleRealTimeMode() { isRealTimeMode = !isRealTimeMode; const indicator = document.getElementById('modeIndicator'); const button = event.target; if (isRealTimeMode) { indicator.textContent = '实时模式'; button.textContent = '⚡ 实时转换'; button.style.background = ''; showToast('实时转换已开启'); } else { indicator.textContent = '手动模式'; button.textContent = '⚡ 手动模式'; button.style.background = '#ff9800'; showToast('已切换到手动模式'); } } function showHelp() { const helpText = ` 🔄 智能文本大小写转换器使用说明: 📝 基础功能: • 全小写:将所有字母转为小写 • 全大写:将所有字母转为大写 • 首字母大写:每个单词首字母大写 • 句式大写:每句话首字母大写 🛠️ 编程格式: • 驼峰式:firstName (首字母小写) • 帕斯卡式:FirstName (首字母大写) • 蛇形式:first_name (下划线分隔) • 烤串式:first-name (短横线分隔) 🎯 特殊功能: • 大小写反转:大写变小写,小写变大写 • 交替大小写:字符间交替变换 • 随机大小写:随机转换字符大小写 ⚡ 实用工具: • 实时转换:输入时自动应用上次转换 • 预览模式:可视化转换效果 • 转换历史:查看最近的转换记录 • 文本统计:字符、单词、行数统计 💡 快捷键: • Ctrl+A:全选文本 • Ctrl+C:复制选中内容 • Ctrl+V:粘贴文本 `; alert(helpText); } // 提示消息 function showToast(message, type = 'success') { const toast = document.getElementById('toast'); toast.textContent = message; toast.className = 'toast show'; if (type === 'warning') { toast.style.background = '#ff9800'; } else if (type === 'error') { toast.style.background = '#f44336'; } else { toast.style.background = '#4caf50'; } setTimeout(() => { toast.classList.remove('show'); }, 3000); } // 键盘快捷键 document.addEventListener('keydown', function(e) { if (e.ctrlKey && e.key === 'Enter') { const lastConversion = localStorage.getItem('lastConversion'); if (lastConversion) { convertCase(lastConversion); } } }); </script> </body> </html>