add json-parser
This commit is contained in:
JiyangTang
parent
32d5833d4d
commit
e64cb542a2
@ -104,7 +104,11 @@
|
||||
<artifactId>alibaba-dingtalk-service-sdk</artifactId>
|
||||
<version>2.0.0</version>
|
||||
</dependency>
|
||||
|
||||
<!-- thymeleaf依赖 -->
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-thymeleaf</artifactId>
|
||||
</dependency>
|
||||
</dependencies>
|
||||
<build>
|
||||
<resources>
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
package top.baogutang.admin.controller;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
|
||||
/**
|
||||
* @description:
|
||||
* @author: nikooh
|
||||
* @date: 2023/10/12 : 11:01
|
||||
*/
|
||||
|
||||
@Controller
|
||||
public class StaticController {
|
||||
|
||||
@RequestMapping("/json")
|
||||
public String viewJsonParseHtml() {
|
||||
// 这里返回的字符串是HTML文件名（不包括扩展名）
|
||||
return "json-parse";
|
||||
}
|
||||
}
|
||||
156
baogutang-admin/src/main/resources/templates/json-parse.html
Normal file
156
baogutang-admin/src/main/resources/templates/json-parse.html
Normal file
@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>JSON格式化工具</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'JetBrains Mono NL', Monaco, monospace;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#input-container {
|
||||
flex: 1;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#input {
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
padding: 10px;
|
||||
font-family: 'JetBrains Mono NL', Monaco, monospace;
|
||||
font-size: 18px; /* 增大字体 */
|
||||
line-height: 1.4;
|
||||
border: none;
|
||||
color: #333;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#output-container {
|
||||
flex: 1;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#output {
|
||||
font-family: 'JetBrains Mono NL', Monaco, monospace;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#output .key {
|
||||
color: rgb(134, 48, 139);
|
||||
}
|
||||
|
||||
#output .null {
|
||||
color: rgb(223, 99, 59);
|
||||
}
|
||||
|
||||
#output .number,
|
||||
#output .boolean {
|
||||
color: rgb(83, 168, 221);
|
||||
}
|
||||
|
||||
#output .string {
|
||||
color: rgb(96, 179, 88);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="input-container">
|
||||
<textarea id="input" placeholder="在这里输入JSON"></textarea>
|
||||
</div>
|
||||
<div id="output-container">
|
||||
<pre id="output"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const inputElement = document.getElementById("input");
|
||||
const outputElement = document.getElementById("output");
|
||||
|
||||
inputElement.addEventListener("input", formatJSON);
|
||||
|
||||
function formatJSON() {
|
||||
try {
|
||||
const inputJSON = JSON.parse(inputElement.value);
|
||||
const formattedJSON = JSON.stringify(inputJSON, null, 4);
|
||||
outputElement.innerHTML = formatSyntaxHighlight(formattedJSON);
|
||||
clearErrorMessage();
|
||||
} catch (error) {
|
||||
outputElement.innerHTML = "";
|
||||
displayErrorMessage("JSON格式错误： " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function formatSyntaxHighlight(json) {
|
||||
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
return json.replace(
|
||||
/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|[-+]?(\d+(\.\d*)?|\.\d+)([eE][-+]?\d+)?\b|true|false|null)/g,
|
||||
match => {
|
||||
let cls = 'number';
|
||||
if (/^"/.test(match)) {
|
||||
if (/:$/.test(match)) {
|
||||
cls = 'key';
|
||||
} else {
|
||||
cls = 'string';
|
||||
}
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = 'boolean';
|
||||
} else if (/null/.test(match)) {
|
||||
cls = 'null';
|
||||
}
|
||||
return `<span class="${cls}">${match}</span>`;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function displayErrorMessage(message) {
|
||||
const errorMessage = document.createElement("div");
|
||||
errorMessage.classList.add("error-message");
|
||||
errorMessage.textContent = message;
|
||||
outputElement.appendChild(errorMessage);
|
||||
}
|
||||
|
||||
function clearErrorMessage() {
|
||||
const errorMessage = outputElement.querySelector(".error-message");
|
||||
if (errorMessage) {
|
||||
errorMessage.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function autoAdjustFontSize() {
|
||||
const input = document.getElementById("input");
|
||||
input.style.fontSize = "18px"; /* 增大字体 */
|
||||
input.style.height = "auto";
|
||||
input.style.height = (input.scrollHeight + 10) + "px";
|
||||
}
|
||||
|
||||
window.addEventListener("load", autoAdjustFontSize);
|
||||
inputElement.addEventListener("input", autoAdjustFontSize);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user