解析HTML"视觉"

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 中是可能的，因为您可以确定任何元素相对于窗口原点的偏移位置。 查看此处的示例。

\n\n

代码：

\n\n

$(function() {\n\nfunction sameHorizon( obj1, obj2, tolerance ) {\n\n    var tolerance = tolerance || 0;\n\n    var obj1top = obj1.offset().top;\n    var obj2top = obj2.offset().top;\n\n    return (Math.abs(obj1top - obj2top) <= tolerance);\n\n}\n\n$(\'p\').each(function(i,obj) {\n    if ($(obj).css(\'margin-top\').replace(\'px\',\'\') < 0) {\n        var p1 = $(obj).prev(\'p\');\n        var p2 = $(obj);\n        var pTol = 4; // pixel tolerance within which elements considered aligned\n\n        if (sameHorizon(p1, p2, pTol)) {\n            // put what you want to do with these objects here\n            // I just highlighted them for example\n            p1.css(\'background\',\'#cc0\');\n            p2.css(\'background\',\'#c0c\');\n\n            // but you can manipulate their contents\n            console.log(p1.html(), p2.html());\n        }\n    }\n});\n\n\xe2\x80\x8b});\n

\n\n

这段代码基于这样的假设：如果 a<p>具有负数margin-top，那么它会尝试与之前的 保持一致<p>，但是如果您了解 jQuery，那么如何更改它以满足不同的标准应该是显而易见的。

\n\n

如果您无法使用 jQuery 来解决您的问题，那么希望这对其他人有用，或者您可以在 jQuery 中设置一些内容来解析此问题并输出新标记。

\n