JSON在线压缩功能，适配所有框架，轻量便捷。支持压缩、格式化、校验功能，并且能标记错误位置，话不多说，上架。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editor</title>
<style>body {font-family: Arial, sans-serif;margin: 20px;}.json_edit{width: 100%;}.json_edit .text_contant {width: 100%;height: 300px;border: 1px solid #ccc;padding: 10px;font-size: 14px;outline: none;font-family: monospace;}.json_edit .optionBtn {padding: 10px 15px;margin: 5px;background-color: #007bff;color: #fff;border: none;cursor: pointer;font-size: 14px;}.json_edit #toolTop {margin-top: 20px;padding: 10px;background: #f9f9f9;white-space: pre-wrap;color: #ff4343;}.json_edit .optionBtn:hover {background-color: #0056b3;}.json_edit .error {border: 2px solid #ff4343;background-color: #ffe6e6;}.json_edit .error_content {background-color: #ffcccc;color: #ff4343;font-weight: bold;}.json_edit .line_number {display: inline-block;width: 30px;text-align: right;margin-right: 10px;color: #888;font-size: 13px}</style>
</head>
<body><div class="json_edit"><textarea class="text_contant" id="textareaInput" oninput="clearError()"></textarea><button class="optionBtn" onclick="formatJSON()">格式化JSON</button><button class="optionBtn" onclick="compressJson()">压缩JSON</button><div id="toolTop"></div></div><script>const validJSON = (str) => {try {const obj = JSON.parse(str);return typeof obj === 'object' && obj !== null && (Array.isArray(obj) || Object.prototype.toString.call(obj) === '[object Object]');} catch (e) {return false;}}// 格式化json操作const formatJSON = ()=> {const textareaInput = document.getElementById('textareaInput');const toolTop = document.getElementById('toolTop');if (!textareaInput.value) {return }if (!validJSON(textareaInput.value)) {markError(new Error('JSON格式错误！'), textareaInput);return;}try {const jsonObj = JSON.parse(textareaInput.value);textareaInput.value = JSON.stringify(jsonObj, null, 2);textareaInput.classList.remove('error');toolTop.textContent = '格式化成功!';toolTop.style.color = '#12a793';} catch (error) {markError(error, textareaInput);toolTop.textContent = 'JSON格式错误：' + error.message;toolTop.style.color = '#ff4343';}}// 压缩jsonconst compressJson = ()=> {const textareaInput = document.getElementById('textareaInput');const toolTop = document.getElementById('toolTop');if (!textareaInput.value) {return }if (!validJSON(textareaInput.value)) {markError(new Error('JSON格式错误！'), textareaInput);return;}try {const jsonObj = JSON.parse(textareaInput.value);textareaInput.value = JSON.stringify(jsonObj);textareaInput.classList.remove('error');toolTop.textContent = '压缩成功!';toolTop.style.color = '#12a793';} catch (error) {markError(error, textareaInput);toolTop.textContent = 'JSON格式错误：' + error.message;toolTop.style.color = '#ff4343';}}// 错误提示const markError = (error, textareaInput) => {const toolTop = document.getElementById('toolTop');textareaInput.classList.add('error');let text = textareaInput.value;try {JSON.parse(text);} catch (e) {let match = e.message.match(/position (\d+)/);if (match) {let pos = parseInt(match[1]);let lines = text.substring(0, pos).split('\n');let line = lines.length;let column = lines[lines.length - 1].length + 1;let errorChar = text[pos] || ' ';let formattedText = text.split('\n').map((l, i) => {return `<span class="line_number">${i + 1}</span>${l}`;}).join('\n');let highlightedText = formattedText.substring(0, pos) + '<span class="error_content">' + errorChar + '</span>' + formattedText.substring(pos + 1);toolTop.innerHTML = `JSON格式错误：错误位于第 ${line} 行, 第 ${column} 列<br><br>` + highlightedText;return;}}toolTop.textContent = 'JSON格式错误：' + error.message;toolTop.style.color = '#ff4343';}// 清空errorconst clearError = ()=> {document.getElementById('textareaInput').classList.remove('error');document.getElementById('toolTop').textContent = '';}</script>
</body>
</html>
