Разбор HTML "Визуально"

Question

Хорошо, я не знаю, как назвать этот вопрос. У меня есть несколько HTML-файлов, вероятно написанных самим лордом Люцификатором, которые мне нужно проанализировать. Он состоит из многих сегментов, подобных этому, среди других HTML-тегов

<p>HeadingNumber</p>
<p style="text-indent:number;margin-top:neg_num ">Heading Text</p>
<p>Body</p>

Обратите внимание, что номер заголовка и текст находятся в отдельных тегах p, выровненных по горизонтальной линии css. css может быть любым, что угодно Люциферу, смесью отступов, отступов, полей и позиций.

Однако эта линия является единственным объектом в моей бизнес-модели и должна быть сохранена как таковая. Итак, как определить, находятся ли два элемента р визуально в одной строке, и обработать их соответствующим образом. Я считаю, что HTML-файлы хорошо сформированы, если это поможет.

Answer 1

Вы не указали, как анализировали, но это возможно в jQuery, поскольку вы можете определить позицию смещения любого элемента из начала координат окна. Посмотрите пример здесь.

Код:

$(function() {

function sameHorizon( obj1, obj2, tolerance ) {

    var tolerance = tolerance || 0;

    var obj1top = obj1.offset().top;
    var obj2top = obj2.offset().top;

    return (Math.abs(obj1top - obj2top) <= tolerance);

}

$('p').each(function(i,obj) {
    if ($(obj).css('margin-top').replace('px','') < 0) {
        var p1 = $(obj).prev('p');
        var p2 = $(obj);
        var pTol = 4; // pixel tolerance within which elements considered aligned

        if (sameHorizon(p1, p2, pTol)) {
            // put what you want to do with these objects here
            // I just highlighted them for example
            p1.css('background','#cc0');
            p2.css('background','#c0c');

            // but you can manipulate their contents
            console.log(p1.html(), p2.html());
        }
    }
});

​});

Этот код основан на предположении, что если <p> имеет отрицательный margin-top, то он пытается выровняться с предыдущим <p>, но если вы знаете jQuery, должно быть очевидно, как его изменить на соответствовать различным критериям.

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

Answer 2

У меня нет особого опыта его использования, но если HTML правильно сформирован и в зависимости от того, в каком формате вам нужны ваши проанализированные данные, вы сможете использовать его как документ XML и использовать XQuery для анализа ваши данные.

Также откройте HTML в Firefox и посмотрите, сможете ли вы выяснить, какие стили CSS применяются с помощью Firebug. Это может дать вам лучшее представление о том, как выстраивается HTML-код ... хотя похоже, что это делается с использованием 'margin-top: absolute_number' ... если это так, я думаю, что XQuery сможет найти элементы с этим конкретным стилем применения.

Answer 3

Вы можете запустить irobotsoft web scraper и пройти тест:

• Открыть страницу в окне браузера
• Выберите и отметьте строку
• Используйте меню: Дизайн -> Попрактикуйтесь в HTQL и посмотрите, сможет ли он извлечь строку.