Análisis HTML "Visualmente"

Question

Bien, estoy en la pérdida de cómo nombrar esta pregunta. Tengo algunos archivos HTML, probablemente escritos por el propio Lord Lucifier, que necesito analizar. Consiste en muchos segmentos de este tipo, entre otras etiquetas HTML

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

en cuenta que el número de la partida y el texto están en etiquetas p separados, alineados en una línea horizontal mediante CSS. el CSS puede ser lo que le parezca a Lucifer, una mezcla de sangrías, almohadillas, márgenes y posiciones.

Sin embargo, esa línea es un solo objeto en mi modelo de negocio y debe mantenerse como tal. Entonces, ¿cómo puedo detectar si dos elementos p están visualmente en una sola línea y procesarlos en consecuencia? Creo que los archivos HTML están bien formados si esto ayuda.

Answer 1

No especificó cómo estaba analizando, pero esto es posible en jQuery ya que puede determinar la posición de desplazamiento de cualquier elemento desde el origen de la ventana. Check out the example here.

El código:

$(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()); 
     } 
    } 
}); 

​}); 

Este código se basa en la suposición de que si un <p> tiene un negativo margin-top entonces está tratando de alinearse con el anterior <p>, pero si usted sabe jQuery que debería ser aparente cómo modificarlo para cumplir con diferentes criterios.

Si no puede usar jQuery para su problema, con suerte esto sea útil para otra persona que sea o pueda configurar algo en jQuery para analizar esto y generar nuevas marcas.

Answer 2

Puede ejecutar irobotsoft rascador web y tener una prueba:

• abrir la página en la ventana del navegador
• seleccionar y marcar la línea
• Uso del menú: Diseño -> Práctica HTQL y ver si puede extraer la linea

Answer 3

No tengo mucha experiencia en usarlo, pero si el HTML está bien formado y dependiendo del formato en el que necesite sus datos analizados, puede tratarlo como un documento XML y usarlo XQuery para analizar tus datos.

También abra el HTML en Firefox y vea si puede averiguar qué estilos CSS se están aplicando con Firebug. Puede darte una mejor pista sobre cómo se está alineando el HTML ... aunque parece que se está usando el 'margen superior: número_ negativo' ... si ese es el caso, creo que XQuery debería ser capaz de encontrar los elementos con ese estilo particular aplicado.