跳到主要内容
uencoder
Web 开发 入门 2 个步骤

HTML 转 JSX 并 JS 格式化

HTML 转 JSX 将 class 转为 className 并调整属性。JS 格式化确保一致风格。

解决的问题

将 HTML 转 JSX 后格式化 JavaScript 输出。

输入 → 输出

HTML 转 JSX 输入 → JavaScript 格式化器 输出 ，共 2 个步骤。

运行耗时

1–2 分钟 · 完全在浏览器本地运行。

开始之前

  • HTML 输入

管道

  1. 1 HTML 转 JSX html-to-jsx

    通过将 class= 改写为 className=、for= 改写为 htmlFor= 来把 HTML 转换为 JSX。改写基于正则、不感知字符串：属性值内部出现的 class= 也会被一并改写。

  2. 2 JavaScript 格式化器 js-format

    在线美化或压缩 JavaScript 源代码。仅做文本格式化，不执行代码。免费、隐私本地化、100% 客户端运行。

在工具链中打开

在浏览器本地运行。配方仅定义管道——您的输入绝不离开此标签页。

▶运行此工作流

在下方输入数据并点击运行。所有处理均在浏览器本地完成 — 不会上传任何内容。

管道进度

  1. HTML 转 JSXhtml-to-jsx
  2. JavaScript 格式化器js-format

示例输入

<div class="test">Hello</div>

预期输出

<div className="test">Hello</div>

此输入输出对在构建期用真实工具执行（tests/unit/recipes.test.ts）——预期输出经过验证，非示意。

相关工作流

JS 格式化并 JSON 验证
格式化 JS 代码后验证为 JSON。
管道
JSON 转 TypeScript 并格式化
将 JSON 转 TypeScript 接口后格式化输出。
管道

您可能还需要

与此配方共享工具或主题的工作流。

CSS 格式化并转 LESS
格式化 CSS 后转为 LESS 用于预处理器。
管道
驼峰命名并 JSON 格式化
转为驼峰命名后格式化为 JSON。
管道

使用的工具

HTML 转 JSX
通过将 class= 改写为 className=、for= 改写为 htmlFor= 来把 HTML 转换为 JSX。改写基于正则、不感知字符串：属性值内部出现的 class= 也会被一并改写。
工具
JavaScript 格式化器
在线美化或压缩 JavaScript 源代码。仅做文本格式化，不执行代码。免费、隐私本地化、100% 客户端运行。
工具