Преобразовать абсолютную позицию html в относительную с правильным кодом html

Question

У меня есть html код, подобный этому:

div { position:absolute}

<div style="left: 90px; top: 769.265px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.912303);">a dynamic compiler for JavaScript based on our technique and we</div>
<div style="left: 90px; top: 785.869px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.921039);">have measured speedups of 10x and more for certain benchmark</div>
<div style="left: 90px; top: 802.473px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.894838);">programs.</div>
<div style="left: 90px; top: 828.331px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.947363);">Categories and Subject Descriptors</div>
<div style="left: 327.581px; top: 828.48px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(1.00068);">D.3.4 [</div>
<div style="left: 371.618px; top: 828.63px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.944797);">Programming Lan-</div>
<div style="left: 90px; top: 845.234px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.857653);">guages</div>
<div style="left: 132.037px; top: 845.085px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.898342);">]: Processors —</div>
<div style="left: 231.234px; top: 845.234px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.909762);">Incremental compilers, code generation</div>
<div style="left: 469.214px; top: 845.085px; font-size: 14.944px; font-family: sans-serif;">.</div>

Этот код отображает этот код:

ОСНОВАНО КООРДИНАТЫ Я хочу сделать код следующим образом:

a dynamic compiler for JavaScript based on our technique and we
<br />
have measured speedups of 10x and more for certain benchmark
<br />
programs.
<br />
Categories and Subject Descriptors D.3.4 [Programming Lan-
<br />
guages]: Processors — Incremental compilers, code generation.

есть какой-нибудь парсер, который это делает?

Например, верхний пиксель между строкой с Categories and Subject Descriptors и D.3.4 предполагает, что они находятся на одной линии

Я пытался построить разбор только с JS, но безуспешно.

Answer 1

Парсинг координат мы можем сделать это

const res = document.getElementById("result");
const divs = [...document.querySelectorAll("#source div")];
let styles = [];
divs.forEach((div, i) => {
  let obj = {}
  div.getAttribute("style").split("; ").forEach(style => {
    obj[style.substring(0, style.indexOf(":")).trim()] = style.substring(style.indexOf(":") + 1).trim()
  })
  styles.push(obj)
  let text = div.textContent;
  if (i > 0) {
    const diff = styles[i - 1].top.replace("px", "") - obj.top.replace("px", "");
    const diffLeft = styles[i - 1].left.replace("px", "") - obj.left.replace("px", "");
    if (Math.abs(diff) > 1) {
      res.innerHTML += "<br/>";
    } else {
      res.innerHTML += text[0].match(/[^\w]/) || Math.abs(diffLeft) < 50 ? "" : " "
    }
  }
  res.innerHTML += text;
})

section div {
  position: absolute
}

<div id="result"></div>
<hr/>
<div id="compare">a dynamic compiler for JavaScript based on our technique and we
  <br /> have measured speedups of 10x and more for certain benchmark
  <br /> programs.
  <br /> Categories and Subject Descriptors D.3.4 [Programming Lan-
  <br /> guages]: Processors — Incremental compilers, code generation.</div>

<section id="source">
  <div style="left: 90px; top: 769.265px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.912303);">a dynamic compiler for JavaScript based on our technique and we</div>
  <div style="left: 90px; top: 785.869px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.921039);">have measured speedups of 10x and more for certain benchmark</div>
  <div style="left: 90px; top: 802.473px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.894838);">programs.</div>
  <div style="left: 90px; top: 828.331px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.947363);">Categories and Subject Descriptors</div>
  <div style="left: 327.581px; top: 828.48px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(1.00068);">D.3.4 [</div>
  <div style="left: 371.618px; top: 828.63px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.944797);">Programming Lan-</div>
  <div style="left: 90px; top: 845.234px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.857653);">guages</div>
  <div style="left: 132.037px; top: 845.085px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.898342);">]: Processors —</div>
  <div style="left: 231.234px; top: 845.234px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.909762);">Incremental compilers, code generation</div>
  <div style="left: 469.214px; top: 845.085px; font-size: 14.944px; font-family: sans-serif;">.</div>
</section>

БЕЗ парсинга координат я придумал это. Я оставлю это здесь.

const res = document.getElementById("result");
const divs = [...document.querySelectorAll("#source div")].map(div => div.innerText)

res.innerHTML = divs.join("<br/>")
//      .replace("-<br/>","")
  .replace("—<br/>","—")
  .replace(/<br\/>([\]\[\.,\?\!])+/g,"$1")
  .replace(/([\]\[])+<br\/>/g,"$1")

section div { position: absolute }

<div id="result"></div>
<hr/>
<div id="compare">a dynamic compiler for JavaScript based on our technique and we
<br />
have measured speedups of 10x and more for certain benchmark
<br />
programs.
<br />
Categories and Subject Descriptors D.3.4 [Programming Lan-
<br />
guages]: Processors — Incremental compilers, code generation.</div>

<section id="source">
  <div style="left: 90px; top: 769.265px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.912303);">a dynamic compiler for JavaScript based on our technique and we</div>
  <div style="left: 90px; top: 785.869px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.921039);">have measured speedups of 10x and more for certain benchmark</div>
  <div style="left: 90px; top: 802.473px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.894838);">programs.</div>
  <div style="left: 90px; top: 828.331px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.947363);">Categories and Subject Descriptors</div>
  <div style="left: 327.581px; top: 828.48px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(1.00068);">D.3.4 [</div>
  <div style="left: 371.618px; top: 828.63px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.944797);">Programming Lan-</div>
  <div style="left: 90px; top: 845.234px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.857653);">guages</div>
  <div style="left: 132.037px; top: 845.085px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.898342);">]: Processors —</div>
  <div style="left: 231.234px; top: 845.234px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.909762);">Incremental compilers, code generation</div>
  <div style="left: 469.214px; top: 845.085px; font-size: 14.944px; font-family: sans-serif;">.</div>
</section>

Answer 2

См. Встроенные комментарии:

var results = document.createElement("section");

// Get all the div elements and loop over them
document.querySelectorAll("div").forEach(function(div){
  // Create a new text node and populate with the content of the div
  let t = document.createTextNode(div.textContent);
  
  // Create a <br>
  let b = document.createElement("br");
  
  // Append the elements to the parent
  results.appendChild(t);
  results.appendChild(b);
  
  // Remove the original div from the document
  div.remove();
});

// Append the results to the page
document.body.appendChild(results);

console.log(results.innerHTML);

<div style="left: 90px; top: 769.265px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.912303);">a dynamic compiler for JavaScript based on our technique and we</div>
<div style="left: 90px; top: 785.869px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.921039);">have measured speedups of 10x and more for certain benchmark</div>
<div style="left: 90px; top: 802.473px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.894838);">programs.</div>
<div style="left: 90px; top: 828.331px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.947363);">Categories and Subject Descriptors</div>
<div style="left: 327.581px; top: 828.48px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(1.00068);">D.3.4 [</div>
<div style="left: 371.618px; top: 828.63px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.944797);">Programming Lan-</div>
<div style="left: 90px; top: 845.234px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.857653);">guages</div>
<div style="left: 132.037px; top: 845.085px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.898342);">]: Processors —</div>
<div style="left: 231.234px; top: 845.234px; font-size: 14.944px; font-family: sans-serif; transform: scaleX(0.909762);">Incremental compilers, code generation</div>
<div style="left: 469.214px; top: 845.085px; font-size: 14.944px; font-family: sans-serif;">.</div>