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 sel = WordUnderCursor.getFullWord(e);
if (sel)
{
sel = sel.trim();
}
if (sel && sel != MyApp.last_sel)
{
console.log(sel);
MyApp.last_sel = sel;
}
}
};
MyApp.init();
var WordUnderCursor = {
// Get the full word the cursor is over regardless of span breaks
getFullWord: function(event) {
var i, begin, end, range, textNode, offset;
// Internet Explorer
if (document.body.createTextRange) {
try {
range = document.body.createTextRange();
range.moveToPoint(event.clientX, event.clientY);
range.select();
range = WordUnderCursor.getTextRangeBoundaryPosition(range, true);
textNode = range.node;
offset = range.offset;
} catch(e) {
return ""; // Sigh, IE
}
}
// Firefox, Safari
// REF: https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
else if (document.caretPositionFromPoint) {
range = document.caretPositionFromPoint(event.clientX, event.clientY);
textNode = range.offsetNode;
offset = range.offset;
// Chrome
// REF: https://developer.mozilla.org/en-US/docs/Web/API/document/caretRangeFromPoint
} else if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(event.clientX, event.clientY);
textNode = range.startContainer;
offset = range.startOffset;
}
// Only act on text nodes
if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
return "";
}
var data = textNode.textContent;
//...