Question

好吧，我不知道如何命名这个问题。我有一些HTML文件，可能是由Lucifier本人写的，我需要解析。它包含许多这样的段，以及其他html标签

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

请注意，标题编号和文本位于单独的p标记中，由css在水平线中对齐。 css可能是Lucifier的一些幻想，包括缩进，填充，边距和位置的混合物。

然而，该行是我的商业模式中的单个对象，应该保持这样。那么如何检测两个p元素是否在视觉上在一行中并相应地处理它们。我相信HTML文件如果有帮助就会很好地形成。

Answer 1

您没有指定解析方式，但这可以在jQuery中实现，因为您可以确定窗口原点中任何元素的偏移位置。 Check out the example here.

代码：

$(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

您可以运行irobotsoft web scraper并进行测试：

在浏览器窗口中打开页面
选择并标记该行
使用菜单：设计 - ＆gt;练习HTQL并查看它是否可以提取该行。

Answer 3

我没有很多使用它的经验，但如果HTML格式正确并且根据您需要解析数据的格式，您可以将其视为XML文档并使用XQuery进行解析你的数据。

还可以在Firefox中打开HTML，看看是否可以找出使用Firebug应用的CSS样式。它可能会给你一个更好的线索，说明HTML是如何排列的......虽然看起来像是使用'margin-top：negative_number'来完成...如果是这样的话，我认为XQuery应该能够找到应用了特定样式的元素。

解析HTML“视觉”

3 个答案: