jsonxml-formatter2

v1.0.0

Published

10 days ago

Format json and xml content

Downloads

0High
0Medium
0Low

howard-a

json xml npm formatter jsonformatter

jsonxml-formatter

一个轻量级、零依赖的 JSON/XML 格式化工具组件，支持浏览器端直接渲染使用，只需简单调用 init 方法并传入 DOM 容器 ID，即可自动渲染完整的格式化工具界面及功能。

✨ 核心功能

支持 JSON/XML 两种格式文本的格式化与语法验证
自定义缩进方式（2个空格/4个空格/Tab 制表符）
简洁直观的 UI 界面，支持标签切换（JSON/XML）
快捷键支持（Ctrl+Enter 快速格式化）
错误信息友好提示（格式错误、空输入等）
零外部依赖，体积小巧（压缩后仅 5KB+）

📦 安装

通过 npm 安装（推荐）：


npm install jsonxml-formatter --save

或直接在浏览器中引入 UMD 格式文件（无需安装）：


<!-- 引入 unpkg CDN 资源（替换 @1.0.1 为最新版本） -->
<script src="https://unpkg.com/[email protected]/dist/jsonxml-formatter.umd.js"></script>

🚀 快速使用

1. 基础使用（npm 安装后）

步骤 1：在 HTML 中准备渲染容器


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JSON/XML 格式化工具</title>
</head>
<body>
  <!-- 格式化工具渲染容器 -->
  <div id="formatter-container"></div>

  <!-- 引入并初始化 -->
  <script type="module">
    // ESModule 引入
    import { init } from 'jsonxml-formatter';
    // 初始化（传入容器 ID）
    init('formatter-container');
  </script>
</body>
</html>

2. CommonJS 引入（Node.js/旧项目）


// CommonJS 引入
const { init } = require('jsonxml-formatter');

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  init('formatter-container');
});

3. 浏览器直接引入（UMD 格式）


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JSON/XML 格式化工具</title>
  <script src="https://unpkg.com/[email protected]/dist/jsonxml-formatter.umd.js"></script>
</head>
<body>
  <div id="formatter-container"></div>

  <script>
    // 全局变量 JsonXmlFormatter 直接使用
    JsonXmlFormatter.init('formatter-container');
  </script>
</body>
</html>

⚙️ 高级配置

init 方法支持传入第二个参数（配置对象），自定义工具行为：


init('formatter-container', {
  indent: 2, // 默认缩进方式（2/4/'tab'，默认 4）
});

配置项说明

|配置项|类型|可选值|默认值|说明| |---|---|---|---|---| |indent|Number/String|2、4、'tab'|4|格式化后的缩进方式|

📋 使用示例

1. JSON 格式化

输入未格式化的 JSON 文本：


{"name":"jsonxml-formatter","type":"工具组件","features":["JSON格式化","XML格式化","自定义缩进"],"version":"1.0.1"}

点击「格式化」按钮后，输出结果：


{
    "name": "jsonxml-formatter",
    "type": "工具组件",
    "features": [
        "JSON格式化",
        "XML格式化",
        "自定义缩进"
    ],
    "version": "1.0.1"
}

2. XML 格式化

输入未格式化的 XML 文本：


<root><tool name="jsonxml-formatter"><version>1.0.1</version><features><feature>JSON格式化</feature><feature>XML格式化</feature></features></tool></root>

点击「格式化」按钮后，输出结果：


<root>
    <tool name="jsonxml-formatter">
        <version>1.0.1</version>
        <features>
            <feature>JSON格式化</feature>
            <feature>XML格式化</feature>
        </features>
    </tool>
</root>

🔧 常见问题

Q1：初始化时提示「未找到ID为 xxx 的DOM元素」？

A：确保 init 方法调用时，目标 DOM 元素已存在（建议在 DOMContentLoaded 事件中初始化）。

Q2：XML 格式化失败，提示「XML格式不正确」？

A：检查输入的 XML 文本是否符合语法规范（如标签闭合、属性引号完整等），无效 XML 无法被正常格式化。

Q3：引入后样式错乱？

A：组件样式已内置并自动注入，若被项目全局样式覆盖，可通过增加样式权重修复（组件根容器类名为 jsonxml-formatter）。