Как разобрать html один раз и получить все css и html structor

Я пишу приложение в качестве браузера и вам нужно разобрать html. Мое решение: я читаю один за другим char и создаю конструктор страницы, например, когда я читаю <div class="c10 c20">bold words</div>, тогда все слова в div будут рисовать свойствами класса c10, c20, но проблема состоит в том, что div имеет два класса с двумя местами, определяющими как текущие:Как разобрать html один раз и получить все css и html structor

<html> 
<head> 
<style type="text/css"> 
.c10 
{ 
    font-size:10px; 
} 
</style> 
</head> 

<body> 
<div class="c10 c20">bold words</div> 
<style type="text/css"> 
.c20 
{ 
    font-size:20px; 
} 
</style> 
</body> 

</html>

Так что, когда я прочитал <div я не знаю, свойства класса c20 => Я не знаю, сохранить стиль для DIV, если я не прочитал до конца HTML. Если я прочитал до конца html для чтения всех css, тогда я должен прочитать два раза для одного документа. Как решить мою проблему?

источник

2015-09-03 StreetRacing

Вы знаете свойства c20, потому что вы читаете весь стиль перед телом. – Alvins

c20 место в теле, я думаю, что метод для решения проблемы читается два раза. – StreetRacing

Это можно решить, не покрасив div одновременно с разбором HTML. Обычно браузер анализирует веб-страницу во внутренней структуре данных. После того, как эта структура данных будет построена, она обрабатывается алгоритмом рендеринга, который «рисует» результат для экрана.

Пример демонстрирует этот подход с вашим примером:

В этом примере мы будем использовать дерево для представления HTML и хэш-карты для хранения CSS. Это не лучший способ представить его, но его просто понять и визуализировать.

Разбор HTML. Когда синтаксический анализатор считывает элемент HTML, помещаем его в дерево, и когда синтаксический анализатор читает CSS-класс, храните его в хэш-карте.
Пройдите дерево с алгоритмом рендеринга. Когда алгоритм рендеринга находит div, ссылающийся на CSS-класс c10 и c20, просто просмотрите соответствующие свойства CSS в хэш-карте, чтобы определить, как его следует нарисовать на экране.

После разбора дерева и хэш-карта будет выглядеть примерно так:

Tree (omitting style-elements) 
------------------------------ 
html 
|-- head 
|-- body 
    |-- div class="c10 c20" 

Hash map 
-------- 
key -> value 
.c10 -> font-size:10px 
.c20 -> font-size:20px

Этот способ HTML-файл только для чтения один раз, но все CSS-стили доступны для алгоритма рендеринга , Вы по-прежнему в некотором смысле «читаете» HTML дважды, но стоимость перемещения структуры данных в памяти затмевается стоимостью чтения из файла.

Если вы не тот тип, который действительно любит внедрять каждую последнюю строку кода в вашем приложении (это тоже прекрасно, а иногда и очень весело, хотя и требует много времени), вы, вероятно, сможете найти библиотека, которая обрабатывает HTML в структуре объекта. Тогда вам нужно только сделать алгоритм рендеринга. Я также предложил бы вам прочитать на Document Object Model (DOM).

источник

2015-09-04 00:21:29 Teodor

Если я использую DOM, '

in div

intersect

asdf

', тогда текст div будет ** в div пересекать asdf **. Как получить текст div - ** в div ** и ** asdf ** – StreetRacing

Вы бы использовали что-то вроде [jsoup] (http://jsoup.org/) или любого другого парсера Java HTML (я думаю, вы Мне понадобится Java, чтобы заставить его работать с Android. Чтобы получить содержимое раздела по разборке HTML, вы сначала [выберите его] (http://jsoup.org/cookbook/extracting-data/selector-syntax). Проверьте [try jsoup] (http://try.jsoup.org/~IkjlKJMEdF7VRpsb-UPWjgxE6d8) для интерактивного примера того, как выбрать ваш div. Затем вы вызываете [.Text()] (http://jsoup.org/cookbook/extracting-data/attributes-text-html) в выбранном div, чтобы получить текст внутри div. – Teodor

поддерживает jsoup не так хорошо, как xml? – StreetRacing

Как разобрать html один раз и получить все css и html structor

ответ

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