How to Build a Case Converter Tool Using HTML, CSS, and JavaScript
TL;DR · AI 摘要
本文指导如何使用 HTML、CSS 和 JavaScript 构建一个案例转换工具，适合前端开发初学者。
核心要点
- 使用 HTML、CSS 和 JavaScript 构建一个案例转换工具。
- 工具支持 UPPERCASE、lowercase、Title Case 和 Sentence case 转换。
- 集成 PDF 和 Word 导出功能。
结构提纲
按章节快速跳转。
思维导图
用一张图看清主题之间的关系。
查看大纲文本（无障碍 / 无 JS 友好）
- 构建案例转换工具
- HTML
- 结构
- CSS
- 样式
- JavaScript
- 功能实现
- 导出 PDF/Word
金句 / Highlights
值得收藏与分享的关键句。
This lightweight application allows users to paste their content and immediately transform it into standard formats like UPPERCASE, lowercase, Title Case, and Sentence case.
Alongside the text formatting, we'll integrate a live character counter and set up functionality to export the final text as a PDF or Word document.
The guide provides a step-by-step approach to building a practical web utility using only HTML, CSS, and vanilla JavaScript.
如何使用 HTML、CSS 和 JavaScript 构建一个大小写转换工具
2026年6月12日
/
#JavaScript
Bansidhar Kadiya
如果你希望通过构建一个实用的网络工具来提升你的前端开发技能，这篇指南正是为你准备的。
我们将从零开始，仅使用 HTML、CSS 和原生 JavaScript 编写一个功能齐全的大小写转换工具。
这个轻量级的应用程序允许用户粘贴内容，并立即将其转换为标准格式，如 UPPERCASE、lowercase、Title Case 和 Sentence case。
除了文本格式化，我们还将集成一个实时字符计数器，并设置功能将最终文本导出为 PDF 或 Word 文档。
拿起你最喜欢的代码编辑器，让我们开始吧。
前提条件
在开始之前，你应该对以下工具和概念有基本的了解：
- 核心网络技术：对 HTML 结构、基本 CSS 样式以及 JavaScript 概念（如函数、数组方法和字符串操作）有基本的理解。
- 开发环境：在你的计算机上安装了一个代码编辑器（例如 Visual Studio Code），以及一个现代的网络浏览器，用于本地测试你的应用程序。
目录
- 第一步：设置你的项目
- 第二步：构建 HTML 结构
- 第三步：使用 CSS 对工具进行样式设计
- 第四步：添加 JavaScript 功能
- 第五步：测试你的工具
- 结论
第一步：设置你的项目
在编写任何代码之前，你需要为应用程序文件建立一个清晰的目录结构。
首先，你需要初始化一个工作区。打开你的文件管理器，创建一个全新的目录，以保持你的工作井井有条。让我们将这个目录命名为 case-converter-app。
然后，你将生成所需的文件。在你新创建的目录中，设置以下三个空白文件：
- index.html
- styles.css
- script.js
第二步：构建 HTML 结构
在代码编辑器中打开 index.html 文件。你将在这里添加工具的结构基础。
将以下代码添加到你的 index.html 文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case Converter Tool</title>
<link rel="stylesheet" href="styles.css">
<!-- jsPDF library for generating PDF files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- Google Fonts for a modern look -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-container">
<div class="editor-section"> <div class="textarea-header"> <span class="tip-badge">💡 提示：使用下载按钮保存结果</span> </div> <textarea id="inputText" placeholder="在此处输入或粘贴内容..."></textarea> </div>
<!-- 案例转换按钮 --> <div class="button-grid case-buttons"> <button class="case-btn" onclick="convertCase(event, 'upper')">全大写</button> <button class="case-btn" onclick="convertCase(event, 'lower')">全小写</button> <button class="case-btn" onclick="convertCase(event, 'capitalized')">首字母大写</button> <button class="case-btn" onclick="convertCase(event, 'title')">标题格式</button> <button class="case-btn" onclick="convertCase(event, 'sentence')">句子格式</button> <button class="case-btn" onclick="convertCase(event, 'inverse')">交替大小写</button> <button class="case-btn" onclick="convertCase(event, 'alternate')">交替大小写</button> </div>
<div class="divider"></div>
<!-- 操作按钮 --> <div class="button-grid action-buttons"> <button class="action-btn primary-action copy-btn" onclick="copyToClipboard()">复制到剪贴板</button> <button class="action-btn" onclick="downloadPDF()">下载 PDF</button> <button class="action-btn" onclick="downloadWord()">下载 Word</button> <button class="action-btn danger-action" onclick="clearText()">清除文本</button> </div>
<!-- 实时统计 --> <div class="stats-panel"> <div class="stat-box"> <span class="stat-value" id="charCount">0</span> <span class="stat-label">字符数</span> </div> <div class="stat-box"> <span class="stat-value" id="wordCount">0</span> <span class="stat-label">单词数</span> </div> <div class="stat-box"> <span class="stat-value" id="paragraphCount">0</span> <span class="stat-label">段落数</span> </div> <div class="stat-box"> <span class="stat-value" id="sentenceCount">0</span> <span class="stat-label">句子数</span> </div> </div>
</div>
<script src="script.js"></script> </body> </html>
理解这段 HTML：
- `<script src="...jspdf..."></script>`：这链接到一个外部库，允许 JavaScript 在用户的浏览器中直接生成 PDF 文件。
- `<textarea id="inputText">`：这创建了主要的文本框，用户将在此处粘贴内容。
- `<div class="stats-panel">`：这部分包含具有唯一 ID 的 span 元素。你将使用 JavaScript 通过这些 ID 实时更新文本统计信息。
## 第三步：使用 CSS 为工具添加样式
接下来，你将为工具添加一个干净、专业的设计。打开你的 styles.css 文件，并添加以下代码：
- {
margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 2rem; color: #1e293b; }
.app-container { background: #ffffff; width: 100%; max-width: 900px; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); padding: 2.5rem; }
.textarea-header { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.tip-badge { background: #fef08a; color: #854d0e; padding: 0.35rem 0.85rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
textarea { width: 100%; height: 220px; padding: 1.5rem; border: 2px solid #e2e8f0; border-radius: 16px; font-size: 1rem; resize: vertical; outline: none; transition: all 0.3s ease; background: #f8fafc; }
textarea:focus { border-color: #007bff; background: #fff; box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1); }
.button-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
button { padding: 0.75rem 1.25rem; border: none; border-radius: 12px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.case-btn { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.case-btn:hover { background: #e2e8f0; }
/* The active class highlights the selected button */ .case-btn.active { background: #007bff; color: #fff; border-color: #007bff; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25); }
.divider { height: 1px; background: #e2e8f0; margin: 1.5rem 0; }
.action-btn { background: #fff; border: 1px solid #cbd5e1; }
.action-btn:hover { background: #f8fafc; border-color: #94a3b8; }
.primary-action { background: #007bff; color: #fff; border-color: #007bff; }
.primary-action:hover { background: #0056b3; border-color: #0056b3; }
.danger-action { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
.danger-action:hover { background: #fee2e2; border-color: #f87171; }
.stats-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin-top: 2rem; background: #f8fafc; padding: 1.5rem; border-radius: 16px; border: 1px solid #e2e8f0; }
.stat-box { display: flex; flex-direction: column; align-items: center; }
.stat-value { font-size: 1.75rem; font-weight: 700; }
.stat-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; }
理解这段 CSS：
- body：你使用 Flexbox 来将工具完美地居中在屏幕上，并应用一个柔和的渐变背景。
- .app-container：这创建了一个白色、圆角的卡片，带有柔和的阴影，用于容纳用户界面。
- .case-btn.active：你在这里定义了活动状态。你将使用 JavaScript 将此类应用到用户点击的特定按钮上。
到目前为止，我们已经完全构建并美化了用户界面。工具将看起来像这样：
目前，前端是可见的，但按钮完全是静态的。为了让转换真正起作用，我们必须在 JavaScript 中编写逻辑。
## 第 4 步：添加 JavaScript 功能
现在你需要使工具具有交互性。打开 script.js 文件并添加以下代码：
const textArea = document.getElementById('inputText');
// 监听输入以实时更新统计信息 textArea.addEventListener('input', updateStats);
function updateStats() { const text = textArea.value;
document.getElementById('charCount').textContent = text.length;
const words = text.trim().split(/\s+/).filter(word => word.length > 0); document.getElementById('wordCount').textContent = words.length;
const sentences = text.split(/[.!?]+/).filter(sentence => sentence.trim().length > 0); document.getElementById('sentenceCount').textContent = sentences.length;
const paragraphs = text.split(/\n+/).filter(paragraph => paragraph.trim().length > 0); document.getElementById('paragraphCount').textContent = paragraphs.length; }
function convertCase(event, type) { let text = textArea.value; if (!text) return;
// Highlight the active button const buttons = document.querySelectorAll('.case-btn'); buttons.forEach(btn => btn.classList.remove('active')); if (event) { event.target.classList.add('active'); }
// Process the text switch (type) { case 'upper': text = text.toUpperCase(); break; case 'lower': text = text.toLowerCase(); break; case 'capitalized': text = text.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()); break; case 'title': const minorWords = ['a', 'an', 'the', 'and', 'but', 'or', 'for', 'nor', 'on', 'at', 'to', 'from', 'by']; text = text.toLowerCase().split(' ').map((word, index) => { if (index !== 0 && minorWords.includes(word)) return word; return word.charAt(0).toUpperCase() + word.slice(1); }).join(' '); break; case 'sentence': text = text.toLowerCase().replace(/(^\s*\w|[\.\!\?]\n*\s*\w)/g, c => c.toUpperCase()); break; case 'inverse': text = text.split('').map(c => c === c.toUpperCase() ? c.toLowerCase() : c.toUpperCase()).join(''); break; case 'alternate': text = text.toLowerCase().split('').map((c, i) => i % 2 === 0 ? c : c.toUpperCase()).join(''); break; }
textArea.value = text; updateStats(); }
function copyToClipboard() { if (!textArea.value) return; textArea.select(); document.execCommand('copy');
const copyBtn = document.querySelector('.copy-btn'); copyBtn.textContent = 'Copied!'; setTimeout(() => copyBtn.textContent = 'Copy To Clipboard', 1500); }
function clearText() { textArea.value = ''; updateStats(); document.querySelectorAll('.case-btn').forEach(btn => btn.classList.remove('active')); }
function downloadWord() { if (!textArea.value) return; const blob = new Blob([textArea.value], { type: 'application/msword' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'converted_text.doc'; a.click(); URL.revokeObjectURL(url); }
function downloadPDF() { if (!textArea.value) return; const { jsPDF } = window.jspdf; const doc = new jsPDF(); const splitText = doc.splitTextToSize(textArea.value, 180); doc.text(splitText, 15, 15); doc.save('converted_text.pdf'); }
理解这段 JavaScript：
- addEventListener('input', ...)：这会监听每一次按键。每次你输入内容时，它会立即重新计算字数、字符数和句子数。
- convertCase(event, type)：此函数接受所选的样式（如大写或首字母大写），并使用正则表达式（Regex）或数组映射来格式化字符串。它还会动态地将 .active CSS 类添加到你点击的特定按钮上。
- document.execCommand('copy')：这是一个浏览器命令，用于将选定的文本直接复制到用户的剪贴板中。
- new Blob()：你使用 Blob（二进制大对象）来即时地从文本构造一个文件。这使得用户可以在不依赖后端服务器的情况下下载 .doc 文件。
## 第五步：测试你的工具
你现在可以准备在真实的浏览器环境中评估你的代码。
- 在你的计算机上打开 case-converter-app 文件夹。
- 双击 index.html 文件以启动应用程序。
- 将一段长段落粘贴到文本区域中，以验证实时统计信息是否准确更新。
- 在不同的格式选项之间切换，以观察即时的 DOM 操作，并测试导出按钮以确保文件可以正确下载。
## 结论
在本教程中，你成功地使用原生 JavaScript 构建了一个基于浏览器的大小写转换工具。
你学会了如何处理连续的用户输入，使用正则表达式操作字符串数据，并直接从前端触发本地文件下载。
最重要的是，你了解到现代的网页浏览器在本地处理复杂的文档修改方面具有强大的能力，这消除了对外部后端服务器的严格依赖。这种方法确保了快速的处理速度，并完全保护了用户数据的隐私。
如果你想在生产环境中实时演示这些概念，欢迎测试这个大小写转换工具，亲身体验这些文本转换操作是如何无缝进行的。
Bansidhar Kadiya 是一位专注于构建快速、实用的网页体验的 WordPress 开发者和 SEO 专家。他是 99tools.net 的创建者，这是一个不断增长的免费浏览器工具集合，旨在帮助开发者、创作者和日常用户快速高效地完成常见任务。
如果你读到了这里，请感谢作者，以表达你对他们的关心。说声谢谢
免费学习编程。freeCodeCamp 的开源课程已经帮助超过 40,000 人成为开发人员。立即开始
ADVERTISEMENT