<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OPML to JSON Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
h1 {
margin-top: 0;
}
textarea {
width: 100%;
height: 300px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
.output {
margin-top: 20px;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
white-space: pre-wrap;
word-wrap: break-word;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.container {
width: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>OPML to JSON Converter</h1>
<textarea id="opml-input" placeholder="Paste your OPML code here"></textarea>
<button onclick="convert()">Convert</button>
<div class="output" id="json-output"></div>
</div>
<script>
function convert() {
var opmlInput = document.getElementById("opml-input").value;
var jsonOutput = document.getElementById("json-output");
try {
var xml = new DOMParser().parseFromString(opmlInput, "text/xml");
var outline = xml.getElementsByTagName("outline")[0];
var json = convertOutline(outline);
jsonOutput.innerHTML = JSON.stringify(json, null, 4);
} catch (e) {
jsonOutput.innerHTML = "Error: " + e.message;
}
}
function convertOutline(outline) {
var json = {};
for (var i = 0; i < outline.attributes.length; i++) {
json[outline.attributes[i].name] = outline.attributes[i].value;
}
if (outline.hasChildNodes()) {
json.children = [];
for (var i = 0; i < outline.childNodes.length; i++) {
var child = outline.childNodes[i];
if (child.nodeName === "outline") {
json.children.push(convertOutline(child));
}
}
}
return json;
}
</script>
</body>
</html>
No comments:
Post a Comment