diff --git a/README.md b/README.md index 1504be17ba36a69c685e0969dcdd86bd061ebbc1..724b27816cb97e77f07f4454f4a9473093da0ad5 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,44 @@ -1. **JSON 结构体树状展示** -通过递归渲染 JSON 数据,提供清晰的树状视图,支持展开/折叠操作,便于查看嵌套结构。 -2. **JSON 比对与差异高亮** -支持对比两个 JSON 数据,智能识别新增、删除、修改的字段,并以不同颜色高亮显示差异部分。 -3. **差异部分聚焦显示** -仅展示 JSON 结构中发生变化的部分,忽略未变化的内容,提升对比效率。 +# JSON Comparison Tool -4. **键值搜索功能** -提供键和值的独立搜索框,按 Enter 键可切换至下一个匹配项,方便快速定位特定数据。 +This project provides a user-friendly web-based tool for comparing JSON data and visualizing structural differences side by side. -5. **清空 JSON 数据** -提供清空当前加载的 JSON 数据的功能,方便用户重新加载新的数据进行对比。 +## Features -6. **离线使用支持** -所有功能均使用纯 JavaScript 实现,无需依赖外部库,确保在无网络环境下也能正常使用。 \ No newline at end of file +- Compare two JSON structures side by side +- Interactive UI with error highlighting +- Visual representation of JSON hierarchy +- Real-time structural analysis and validation +- Error detection and feedback display + +## Usage + +1. Open `JsonCompare.html` in a web browser +2. Input or paste two JSON structures in the designated panels +3. The comparison results will be displayed automatically +4. Use the resize handle to adjust the view between JSON panels + +## Technology Stack + +- HTML5 for structure +- CSS3 for styling +- JavaScript for functionality and JSON processing + +## License + +This project is licensed under the MIT License. See the LICENSE file for details. + +## Project Structure + +``` +├── JsonCompare.html # Main comparison interface +├── README.md # Project overview (this file) +├── LICENSE # License information +└── image.png # Project screenshot/example image +``` + +For developers: +- JSON comparison logic is implemented in JavaScript within `JsonCompare.html` +- The UI allows for easy side-by-side comparison with structural visualization +- Error handling provides immediate feedback on invalid JSON structures \ No newline at end of file