JSFiddle - React, Tailwind, and code Playground
HTML
<p><span class="kinovar"><span id="selection_index3337" class="selection_index"></span>По f7-мъ часЁ твори1тъ сщ7eнникъ начaло съ
кади1ломъ и3 со свэщeю, цrкимъ двeремъ
tвeрзєннымъ, и3 поeтъ: Х</span>rт0съ воскRсе: <span class="kinovar">со
стіхи2. И# по стісёхъ pал0мъ: Б</span>лгcви2 душE моS
гDа: <span class="kinovar">И# є3ктеніA. Тaже каfjсма nбhчнаz.</span>
</p>
<div class="slavic">
<p><span id="selection_index3737" class="selection_index"></span>(л. рo7з њб.)
</p><p><span class="kinovar"><span id="selection_index3738" class="selection_index"></span>Во вт0рникъ вeчера</span>
</p><p><span class="kinovar"><span id="selection_index3739" class="selection_index"></span>tдaніе прaздника пaсхи.</span>
</p><p><span class="kinovar"><span id="selection_index3740" class="selection_index"></span>По f7-мъ часЁ твори1тъ сщ7eнникъ начaло съ
кади1ломъ и3 со свэщeю, цrкимъ двeремъ
tвeрзєннымъ, и3 поeтъ: Х</span>rт0съ воскRсе: <span class="kinovar">со
стіхи2. И# по стісёхъ pал0мъ: Б</span>лгcви2 душE моS
гDа: <span class="kinovar">И# є3ктеніA. Тaже каfjсма nбhчнаz.</span>
</p><p><span class="kinovar"><span id="selection_index3741" class="selection_index"></span>На ГDи воззвaхъ: поeмъ стіхи6ры самоглaсны,
слэпaгw, на ѕ7. Глaсъ в7:</span>
</p><p><span class="kinovar"><span id="selection_index3742" class="selection_index"></span>С</span>лэпhй роди1выйсz, въ своeмъ п0мыслэ
глаг0лаше: є3дA ѓзъ грBхъ рaди роди1тельныхъ
роди1хсz без8 џчію; (л. рo7и) є3дA ѓзъ за
невёріе kзhкwвъ роди1хсz во њбличeніе; не
домышлsюсz вопрошaти: когдA н0щь, когдA дeнь; не
терпи1та ми2 н0зэ кaменнагw претыкaніz, не ви1дэхъ
сlнца сіsюща, нижE во џбразэ менE создaвшагw. но
молю1 ти сz хrтE б9е, при1зри на мS, и3 поми1луй
мS.
</p><p><span class="kinovar"><span id="selection_index3743" class="selection_index"></span>М</span>имоходS ї}съ t с™и1лища, њбрёте
человёка слёпа t рождeніz, и3 ўмилосeрдивсz
положи2 брeніе на џчію є3гw2, и3 речE къ немY:
и3ди2 ўмhйсz въ сілwaмэ: и3...
JavaScript
MyApp = {
data:null,
request_id:0,
init: function()
{
/* MOUSEMOVE */
document.onmousemove = function(e)
{
MyApp.onmousemove(e);
};
},
onmousemove: function (e)
{
if (!this.data && this.progress_started)
{
return;
}
var x = e.x;
var y = e.y;
var sel = MyApp.getWordAtPoint(e.srcElement,x,y);
if (sel)
{
sel = sel.trim();
}
if (sel && sel != MyApp.last_sel)
{
console.log(sel);
MyApp.last_sel = sel;
}
},
getWordAtPoint: function (elem, x, y) {
if(elem.nodeType == elem.TEXT_NODE) {
var range = elem.ownerDocument.createRange();
range.selectNodeContents(elem);
var currentPos = 0;
var endPos = range.endOffset;
while(currentPos+1 < endPos) {
range.setStart(elem, currentPos);
range.setEnd(elem, currentPos+1);
if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right >= x &&
range.getBoundingClientRect().top <= y && range.getBoundingClientRect().bottom >= y) {
range.expand("word");
this.lastNode = elem;
this.lastRange = range;
var ret = range.toString();
range.detach();
/* EXPAND MANUALLY */
var text = elem.parentElement.textContent;
return ret;
}
currentPos += 1;
}
} else {
for(var i = 0; i < elem.childNodes.length; i++) {
var range = elem.childNodes[i].ownerDocument.createRange();
range.selectNodeContents(elem.childNodes[i]);
if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right >= x &&
range.getBoundingClientRect().top <= y && range.getBoundingClientRect().bottom >= y) {
...