2016-11-17 2 views
0

Для домашних заданий в автоматах, используя DomParser, нам нужно отформатировать одну строку в HTMLИспользования Javascript DomParser для форматирования одного строки HTML для многострочных вкладок HTML

<div class="the-best-css-class-like-ever"><div class="youtube-embed" data-oembed="{'version': '1.0', 'type': 'video', 'title': 'Amazing Nintendo Facts', 'html': '<object width=\'425\'><param name=\'movie\' value=\'http://www.youtube.com/v/M3r2XDceM6A&fs=1\'></param>}"><img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png"><img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png"></div><!-- asdf <img> -> --><p>Automata Rules!</p></div> 

в «закладках», многоканальная линия HTML строки

<div class="the-best-css-class-like-ever"> 
    <div class="youtube-embed" data-oembed="{'version': '1.0', 'type': 'video', 'title': 'Amazing Nintendo Facts', 'html': '<object width=\'425\'><param name=\'movie\' value=\'http://www.youtube.com/v/M3r2XDceM6A&fs=1\'></param>}"> 
     <img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png"> 
     <img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png"> 
    </div> 
    <!-- asdf <img> -> --> 
    <p> 
     Automata Rules! 
    </p> 
</div> 

Я никогда не использовал Javascript, так как я могу использовать DOMParser для достижения этой задачи? Из того, что я понимаю, DOMParser берет HTML и форматирует его в древовидную структуру с дочерними элементами. Тем не менее, я пытался пройти через дерево, но все это я получаю являются null и undefined значения

[EDIT] Кто-то в классе дал мне намек на использование

var parser = new DOMParser(); 
var htmlDoc = parser.parseFromString(text, "text/html"); 
var elements = htmlDoc.body.childNodes; 

[EDIT 2] Я решил это, спустив дерево DOM и получив HTML, для этого конкретного тега, из узлов, взяв значения externalHTML и удалив значения дочерних элементов.

element.outerHTML.replace(child.outerHTML, ""); 

Я не мог найти другой, более простой способ сделать это. Ответ Алана очень помог, особенно консоль Firefox и отладчик.

+4

Вы JavaScript домашнее задание, но вы никогда не использовали JavaScript? –

+0

В основном мы кодируем java, поэтому первая часть домашней работы заключалась в анализе регулярных выражений в java – Lightfire228

+0

Кто-то должен сказать вашему инструктору, что Java! = JavaScript. –

ответ

0

Я думаю, вы могли бы использовать его для своей задачи. На вашем месте я бы начал с более легкого примера, а затем я пошел бы с чем-то более сложным.

например

<html> 
    <head> 
    <title>DOM Parser</title> 
    <script> 
     var parser = new DOMParser(); 
     var simpleHTML = "<div class'tst'> <p> hello </p> </div>"; 
     var htmlObj = parser.parseFromString(simpleHTML, "text/html"); 
    </script> 
    </head> 
<body></body> 
</html> 

Если вы загрузите этот фрагмент кода в браузере (открыть консоль для отладки), вы увидите, что htmlObj.children даст вам массив с каждым узлом, поэтому, если вы реализуйте свое решение с помощью Recursion, вы сможете решить свою домашнюю работу.

Здесь Вы можете найти более подробную информацию о DOMParser

Смежные вопросы