Estoy tratando de obtener el delimitadorRect de cada palabra en un HTML.
Por ejemplo,
<html><body>Lorem ipsum dolor</body></html>Quiero la salida como [x, y, ancho, alto] - palabra
[ 8, 8, 44.671875, 19 ] - Lorem [ 56.5, 8, 43.125, 19 ] - ipsum [ 103.4, 8, 35.02, 19 ] - dolorEstoy usando Chrome DevTools Protocol (CDP) para obtener DOMSnapshot que proporciona el límite recto para una línea como un todo y no para palabras individuales. ( mi-código-fuente )
[ 8, 8, 130.46875, 19 ] Lorem ipsum dolorSi envuelvo cada palabra en el HTML con una etiqueta de intervalo, Chromium proporciona el resultado deseado. Pero esta solución parece hacky. ¿Hay una mejor manera de hacer esto?
CDP maneja los nodos . En el ejemplo que ha dado, tenemos un nodo de texto como elemento secundario del nodo del cuerpo. el valor del nodo de texto es "Lorem ipsum dolor". Sin embargo, si tenemos el siguiente HTML:
<html> <body> <a>Lorem<a> " " <b>ipsum</b> " " <c>dolor</c> </body> </html>Podremos separar las palabras utilizando los diferentes nodos de texto. Técnicamente, podría buscar nodos de texto y agregar nodos adicionales para hacerlo, pero esto hará que el proceso sea mucho más pesado.
Para resumir esto, dado que en algunos casos varias palabras pueden ser el valor de un nodo de texto, no podemos obtener las coordenadas (o los rectángulos delimitadores) de cada palabra en el nodo por separado usando CDP (sin interferir mucho con la página).