В принципе у меня есть текстовое поле, где я буду вводить URL-адрес и нажимать кнопку "ОК", он покажет предварительный просмотр HTML на левой стороне страницы; и правая сторона будет иметь вид дерева HTML-тегов (body, header, div, span и т.д.), используемых в HTML в качестве прикрепленного изображения. Ожидаемый результат JSON должен быть как конец этого вопроса. Я не могу пройти JSON и создать дерево. Я попробовал следующее:
HTML и JS-код:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABC</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div id="wrapper">
<header>
<h1 class="logo"><img src="images/logo.png" alt="" title="" /></h1>
</header>
<div id="container">
<div class="search-box">
<input type="text" id="url" value="" class="txt-box" />
<input type="button" value="OK" class="btn-search" />
</div>
<div class="inner-wrap">
<div class="left-wrap" id="preview-sec">
</div>
<div class="right-wrap" id="tree-sec">
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" src="js/jquery-1.11.1.js"></script><!-- Jquery plugin -->
<script>
var counter = 0;
$(document).ready(function(){
$('.btn-search').click(function(){
if ($('#url').val() != '') {
$.get(
'http://localhost/test/getHTML.php', {url:$('#url').val()},
function(response) {
$('#preview-sec').html(response);
},'html');
$.getJSON('http://localhost/test/results.json', function(json) {
traverse(json,0);
});
}
});
});
function traverse(obj,id){
if (typeof(obj)=="object") {
if (id == 0) {
$('#tree-sec').append('<ul></ul>');
} else {
$(id).append('<ul></ul>');
}
$.each(obj, function(i,val){
if (i != 'attributes' && i != 'value') {
counter += 1;
var li_populate = "<li id="+i+"-"+counter+">"+i+"</li>";
if (id == 0) {
$('#tree-sec ul').append(li_populate);
} else {
$(id).find('ul').append(li_populate);
}
traverse(val,"#"+i+"-"+counter);
}
})
}
}
</script>
</body>
</html>
PHP-код:
<?php
$url = $_GET['url'];
$html = file_get_contents($url);
function html_to_obj($html) {
$dom = new DOMDocument();
$dom->loadHTML($html);
return element_to_obj($dom->documentElement);
}
function element_to_obj($element) {
//print_r($element);
$obj = array();
$attr = array();
$arr = array();
$name = $element->tagName;
foreach ($element->attributes as $attribute) {
$attr[$attribute->name] = $attribute->value;
if ($attribute->name == 'id') {
$name .= '#'.$attribute->value;
}
}
if (!empty($attr)) {
$arr["attributes"] = $attr;
}
if ($element->nodeValue != '') {
$arr["value"] = $element->nodeValue;
}
foreach ($element->childNodes as $subElement) {
if ($subElement->nodeType == XML_TEXT_NODE) {
}
elseif ($subElement->nodeType == XML_CDATA_SECTION_NODE) {
}
else {
$arr["child_nodes"][] = element_to_obj($subElement);
}
}
$obj[$name] = $arr;
return $obj;
}
$json = json_encode(html_to_obj($html));
$fp = fopen('results.json', 'w');
fwrite($fp,$json);
fclose($fp);
echo $html;exit();
?>
Выход дерева JSON:
JSON Результат:
{
"html": {
"attributes": {
"lang": "en"
},
"value": "Test Development Test\r\n *{\r\n box-sizing:border-box;\r\n }\r\n body {\r\n margin:0;\r\n font-family: sans-serif;\r\n color: #999;\r\n }\r\n a, a:visited {\r\n text-decoration:none;\r\n }\r\n .movie-list .movie{\r\n width:250px;\r\n float:left;\r\n margin-right:25px;\r\n }\r\n .movie-list .movie img{\r\n width:100%;\r\n }\r\n .movie-list .movie a.title{\r\n text-decoration:none;\r\n color:#999;\r\n font-weight:bold;\r\n font-size:18px;\r\n line-height:25px;\r\n }\r\n .movie-list .movie .synopsis{\r\n font-size:14px;\r\n line-height:20px;\r\n }\r\n",
"child_nodes": {
"head": {
"child_nodes": {
"meta": {
"attributes": {
"name": "description",
"content": "A ast of animated movies"
}
},
"title": {
"value": "Test Development Test"
},
"style": {
"attributes": {
"type": "text/css"
},
"value": "\r\n *{\r\n box-sizing:border-box;\r\n }\r\n body {\r\n margin:0;\r\n font-family: sans-serif;\r\n color: #999;\r\n }\r\n a, a:visited {\r\n text-decoration:none;\r\n }\r\n .movie-list .movie{\r\n width:250px;\r\n float:left;\r\n margin-right:25px;\r\n }\r\n .movie-list .movie img{\r\n width:100%;\r\n }\r\n .movie-list .movie a.title{\r\n text-decoration:none;\r\n color:#999;\r\n font-weight:bold;\r\n font-size:18px;\r\n line-height:25px;\r\n }\r\n .movie-list .movie .synopsis{\r\n font-size:14px;\r\n line-height:20px;\r\n }\r\n"
}
}
},
"body": {
"child_nodes": {
"h1": {
"value": "List of animated movies"
},
"div": {
"attributes": {
"class": "movie-list"
},
"child_nodes": {
"div#bh_6": {
"attributes": {
"class": "movie",
"id": "bh_6",
"data-year": "2014"
},
"child_nodes": {
"img": {
"attributes": {
"src": "http://ia.media-imdb.com/images/M/[email protected]_V1_SY317_CR0,0,214,317_AL_.jpg"
}
},
"a": {
"attributes": {
"class": "title",
"href": "http://www.imdb.com/title/tt2245084/"
},
"value": "Big Hero 6"
},
"div": {
"attributes": {
"class": "synopsis"
},
"value": "The special bond that develops between plus-sized inflatable robot Baymax, and prodigy Hiro Hamada, who team up with a group of friends to form a band of high-tech heroes."
}
}
},
"div#tlm": {
"attributes": {
"class": "movie",
"id": "tlm",
"data-year": "2014"
},
"child_nodes": {
"img": {
"attributes": {
"src": "http://ia.media-imdb.com/images/M/[email protected]_V1_SX214_AL_.jpg"
}
},
"a": {
"attributes": {
"class": "title",
"href": "http://www.imdb.com/title/tt1490017/"
},
"value": "The Lego Movie"
},
"div": {
"attributes": {
"class": "synopsis"
},
"value": "An ordinary Lego construction worker, thought to be the prophesied 'Special', is recruited to join a quest to stop an evil tyrant from gluing the Lego universe into eternal stasis."
}
}
},
"div#httyd": {
"attributes": {
"class": "movie",
"id": "httyd",
"data-year": "2010"
},
"child_nodes": {
"img": {
"attributes": {
"src": "http://ia.media-imdb.com/images/M/[email protected]@._V1_SX214_AL_.jpg"
}
},
"a": {
"attributes": {
"class": "title",
"href": "http://www.imdb.com/title/tt0892769/"
},
"value": "How to Train Your Dragon"
},
"div": {
"attributes": {
"class": "synopsis"
},
"value": "A hapless young Viking who aspires to hunt dragons becomes the unlikely friend of a young dragon himself, and learns there may be more to the creatures than he assumed."
}
}
},
"div#up": {
"attributes": {
"class": "movie",
"id": "up",
"data-year": "2009"
},
"child_nodes": {
"img": {
"attributes": {
"src": "http://ia.media-imdb.com/images/M/[email protected]_V1_SX214_AL_.jpg"
}
},
"a": {
"attributes": {
"class": "title",
"href": "http://www.imdb.com/title/tt1049413/"
},
"value": "Up"
},
"div": {
"attributes": {
"class": "synopsis"
},
"value": "By tying thousands of balloons to his home, 78-year-old Carl sets out to fulfill his lifelong dream to see the wilds of South America. Russell, a wilderness explorer 70 years younger, inadvertently becomes a stowaway."
}
}
},
"div#mi": {
"attributes": {
"class": "movie",
"id": "mi",
"data-year": "2001"
},
"child_nodes": {
"img": {
"attributes": {
"src": "http://ia.media-imdb.com/images/M/[email protected]_V1_SX214_AL_.jpg"
}
},
"a": {
"attributes": {
"class": "title",
"href": "http://www.imdb.com/title/tt0198781/"
},
"value": "Monsters, Inc."
},
"div": {
"attributes": {
"class": "synopsis"
},
"value": "Monsters generate their city power by scaring children, but they are terribly afraid themselves of being contaminated by children, so when one enters Monstropolis, top scarer Sulley finds his world disrupted."
}
}
}
}
}
}
}
}
}
}
