[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>JSON快速定位工具</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
textarea { width: 100%; height: 200px; }
input[type=text] { width: 300px; }
button { margin: 10px 0; }
#results { margin-top: 20px; white-space: pre; }
.path { color: blue; cursor: pointer; }
</style>
</head>
<body>
<h2>JSON快速定位工具</h2>
<label>粘贴JSON内容：</label><br>
<textarea id="jsonInput" placeholder='输入你的JSON内容'></textarea><br>
<label>要查找的值（支持部分匹配）：</label><br>
<input type="text" id="searchValue" placeholder='输入要搜索的内容' />
<button onclick="findPaths()">查找路径</button>
<div id="results"></div>
<script>
// 递归遍历JSON对象，找到所有匹配的路径
function searchJSON(obj, target, path = [], results = []) {
if (obj === null || obj === undefined) return results;
if (typeof obj === 'object') {
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
searchJSON(obj[key], target, path.concat(key), results);
}
}
} else {
// 处理基本类型
if (String(obj).includes(target)) {
results.push({ path: path.join('.'), value: obj });
}
}
return results;
}
function findPaths() {
const jsonText = document.getElementById('jsonInput').value;
const searchVal = document.getElementById('searchValue').value.trim();
const resultDiv = document.getElementById('results');
resultDiv.innerHTML = '';
if (!jsonText) {
alert('请粘贴有效的JSON内容');
return;
}
let jsonObj;
try {
jsonObj = JSON.parse(jsonText);
} catch (e) {
alert('无效的JSON格式！');
return;
}
if (!searchVal) {
alert('请填写要查找的值');
return;
}
const matches = searchJSON(jsonObj, searchVal);
if (matches.length === 0) {
resultDiv.innerHTML = '未找到匹配的路径。';
return;
}
// 显示所有匹配路径
matches.forEach(match => {
const span = document.createElement('span');
span.textContent = match.path + ' : ' + match.value;
span.className = 'path';
span.title = '点击复制路径';
span.onclick = () => {
copyToClipboard(match.path);
alert('路径已复制到剪贴板：' + match.path);
};
resultDiv.appendChild(span);
resultDiv.appendChild(document.createElement('br'));
});
}
// 复制到剪贴板
function copyToClipboard(text) {
navigator.clipboard.writeText(text).catch(() => {
// 兼容旧浏览器
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
});
}
</script>
</body>
</html>
你自己打包成HTML文件就行 | 
[复制链接]
发表于 2025-4-18 07:13
