JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div id="input"> <span class='ocr_line' id='line_3' title="bbox 165 201 443 219">
  <span class='ocrx_word' id='word_5' title="bbox 165 201 252 217">Associate</span>  <span class='ocrx_word' id='word_6' title="bbox 259 202 335 218">Director</span>  <span class='ocrx_word' id='word_7' title="bbox 341 203 358 218">of</span>  <span class='ocrx_word' id='word_8' title="bbox 361 203 443 219">Athletics</span> </span>
</div>
<div id="output"></div>

JavaScript

$("#input .ocr_line .ocrx_word").each(function () {
    var coords = $(this).attr("title").split(" ");
    var x = coords[1];
    var y = coords[2];
    $(this).css({
        "position": "absolute",
            "margin-left": x + "px",
            "margin-top": y + "px"
    });
    $("#output").append($(this));
    $("#input").remove();
});