命名风格转换器

命名风格转换器（Case Converter）

变量名、数据库表名、CSS 类名、接口字段命名风格一键互转的轻量网页工具。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，全部转换在浏览器本地完成。

功能特性

• 8 种命名风格实时互转：camelCase、PascalCase、snakecase、CONSTANTCASE、kebab-case、Train-Case、dot.case、Title Case

• 智能自动拆词：同时识别驼峰边界、连续大写缩略词（APIKey → API + Key）、下划线/连字符/空格分隔、数字混排，并将中文等非字母数字噪音自动剔除

• 词单元可视化：实时展示拆词结果 chips，命名转换过程一目了然

• 一键复制：任意风格结果点击即可复制到剪贴板

• 常用样例回填：内置 4 组典型命名样例，快速体验

工作原理

输入命名（任意风格）
        │  ① 驼峰边界拆分：userLogin → user + Login
        │  ② 连续大写拆分：APIKey → API + Key
        ▼  ③ 分隔符与噪音剔除：- _ 空格 中文 → 空格
词单元数组 [user, login, count]
        │
        ▼
8 种风格 Formatter 并行组装
        │
        ▼
camelCase / PascalCase / snake_case / CONSTANT_CASE
kebab-case / Train-Case / dot.case / Title Case

核心拆词只依赖两条正则规则（驼峰边界 + 连续大写）与一次字符过滤，无第三方解析库，逻辑透明可审计。

使用场景

• 前后端联调：接口参数字段在 camelCase（JS）与 snake_case（Python/数据库）之间互转

• 代码规范统一：CSS 类名 kebab-case、常量 CONSTANT_CASE、组件名 PascalCase 的快速产出

• 批量重命名辅助：把旧代码混乱的命名风格（APIKey--from_server 之类）规整为团队约定风格

快速开始

无需安装与构建，直接用浏览器打开 index.html 即可使用，或在任意静态服务器下访问：

python3 -m http.server 8022
# 访问 http://localhost:8022/index.html

技术栈

• HTML5 + CSS3 + 原生 JavaScript（零第三方依赖）

• 拆词正则：/([a-z0-9])([A-Z])/g 驼峰边界 + /([A-Z]+)([A-Z][a-z])/g 连续大写 + 非字母数字字符过滤

• 剪贴板：navigator.clipboard.writeText（含降级提示）