Comment obtenir un mot sous le curseur à l'aide de JavaScript?

Plus pour les deux autres réponses, vous pouvez être en mesure de séparer vos paragraphes dans les travées de l'utilisation de jQuery (ou javascript en général).

De cette façon, vous n'auriez pas besoin de penser à la sortie de votre texte avec des envergures dans les mots. Laissez votre javascript le faire pour vous.

par exemple

<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
Word: <span id="word"></span>

<script type="text/javascript">
    $(function() {
        //wrap words in spans
        $('p').each(function() {
            var $this = $(this);
            $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
        });

        //bind to each span
        $('p span').hover(
            function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
            function() { $('#word').text(''); $(this).css('background-color',''); }
        );
    });
</script>

Noter que le code ci-dessus, bien que cela fonctionne, enlèvent tout code html à l'intérieur de votre étiquette de paragraphe.

jsFiddle exemple

Préambule:

Si vous avez plusieurs travées et imbriquées HTML que séparer les mots (ou même des personnages dans les mots), alors toutes les solutions ci-dessus auront du mal à revenir à la pleine et correcte d'un mot.

Voici un exemple de la richesse question: Х</span>rт0съ. Comment retourner correctement Хrт0съ? Ces questions n'ont pas été abordées en 2010, de sorte que je vais vous présenter deux solutions (2015).

---

Solution 1 - Bande intérieure balises, enveloppez s'étend autour de chaque mot:

Une solution est de supprimer les balises span à l'intérieur des paragraphes, mais de préserver leur texte. Diviser les mots et les phrases sont ainsi réunis en un ensemble comme du texte normal. Chaque mot trouvé par des espaces de la division (et pas seulement un espace), et ces mots sont enveloppés dans des travées qui peuvent être individuellement accessibles.

Dans la démo, vous pouvez mettre en surbrillance le mot en entier et d'obtenir ainsi le texte de l'ensemble de la parole.

---

Code:

JS:

$(function() {
//Get the HTML in #hoverText - just a wrapper for convenience
var $hoverText = $("#hoverText");
//Replace all spans inside paragraphs with their text
$("p span", $hoverText).each(function() {
var $this = $(this);
var text = $this.text(); //get span content
$this.replaceWith(text); //replace all span with just content
});
//Wrap words in spans AND preserve the whitespace
$("p", $hoverText).each(function() {
var $this = $(this);
var newText = $this.text().replace(/([\s])([^\s]+)/g, "$1<span>$2</span>");
newText = newText.replace(/^([^\s]+)/g, "<span>$1</span>");
$this.empty().append(newText);
});
//Demo - bind hover to each span
$('#hoverText span').hover(
function() { $(this).css('background-color', '#ffff66'); },
function() { $(this).css('background-color', ''); }
);
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hoverText">
<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>

Solution 1 texte intégral de démonstration

---

Solution de 2 - Signe d'inspection et DOM transversal:

Ici est une solution plus complexes. C'est une solution algorithmique l'aide d'un noeud de la traversée qui compte avec précision correcte et complète le mot sous le curseur dans un nœud de texte.

Temporaire mot est trouvé, par la vérification de la position du curseur (à l'aide de caretPositionFromPoint ou caretRangeFromPoint, les crédits pour l'idée de @chrisv). Cela peut ou peut ne pas être le mot complet, encore.

Il est ensuite analysé afin de voir si elle est au bord de son nœud de texte (début ou à la fin). Si elle l'est, la précédente nœud de texte ou le texte suivant nœud est examiné pour voir si elle doit être réunis pour faire de cette parole de fragment plus.

Exemple:

Х</span>rт0съ doit retourner Хrт0съ, pas Х ni rт0съ.

L'arborescence DOM traversée pour obtenir le côté non-barrière nœud de texte. Si deux mots fragments sont séparés par un <p> ou une autre barrière de la balise, puis ils ne sont pas adjacents et donc pas partie de la même parole.

Exemple:

њб.)</p><p>Во ne doit pas renvoyer de њб.)Во

---

Dans la démo, la gauche de la div flottante est le mot sous le curseur. Le droit div flottante, si visible, montre comment un mot sur une limite a été formé. D'autres balises peuvent en toute sécurité être en ligne serait avec le texte dans cette solution.

Code:

JS:

$(function() {
//Get the HTML in #hoverText - just a wrapper for convenience
var $hoverText = $("#hoverText");
//Get the full word the cursor is over regardless of span breaks
function getFullWord(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 = 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;
//Sometimes the offset can be at the 'length' of the data.
//It might be a bug with this 'experimental' feature
//Compensate for this below
if (offset >= data.length) {
offset = data.length - 1;
}
//Ignore the cursor on spaces - these aren't words
if (isW(data[offset])) {
return "";
}
//Scan behind the current character until whitespace is found, or beginning
i = begin = end = offset;
while (i > 0 && !isW(data[i - 1])) {
i--;
}
begin = i;
//Scan ahead of the current character until whitespace is found, or end
i = offset;
while (i < data.length - 1 && !isW(data[i + 1])) {
i++;
}
end = i;
//This is our temporary word
var word = data.substring(begin, end + 1);
//Demo only
showBridge(null, null, null);
//If at a node boundary, cross over and see what 
//the next word is and check if this should be added to our temp word
if (end === data.length - 1 || begin === 0) {
var nextNode = getNextNode(textNode);
var prevNode = getPrevNode(textNode);
//Get the next node text
if (end == data.length - 1 && nextNode) {
var nextText = nextNode.textContent;
//Demo only
showBridge(word, nextText, null);
//Add the letters from the next text block until a whitespace, or end
i = 0;
while (i < nextText.length && !isW(nextText[i])) {
word += nextText[i++];
}
} else if (begin === 0 && prevNode) {
//Get the previous node text
var prevText = prevNode.textContent;
//Demo only
showBridge(word, null, prevText);
//Add the letters from the next text block until a whitespace, or end
i = prevText.length - 1;
while (i >= 0 && !isW(prevText[i])) {
word = prevText[i--] + word;
}
}
}
return word;
}
//Return the word the cursor is over
$hoverText.mousemove(function(e) {
var word = getFullWord(e);
if (word !== "") {
$("#result").text(word);
}
});
});
//Helper functions
//Whitespace checker
function isW(s) {
return /[ \f\n\r\t\v\u00A0\u2028\u2029]/.test(s);
}
//Barrier nodes are BR, DIV, P, PRE, TD, TR, ... 
function isBarrierNode(node) {
return node ? /^(BR|DIV|P|PRE|TD|TR|TABLE)$/i.test(node.nodeName) : true;
}
//Try to find the next adjacent node
function getNextNode(node) {
var n = null;
//Does this node have a sibling?
if (node.nextSibling) {
n = node.nextSibling;
//Doe this node's container have a sibling?
} else if (node.parentNode && node.parentNode.nextSibling) {
n = node.parentNode.nextSibling;
}
return isBarrierNode(n) ? null : n;
}
//Try to find the prev adjacent node
function getPrevNode(node) {
var n = null;
//Does this node have a sibling?
if (node.previousSibling) {
n = node.previousSibling;
//Doe this node's container have a sibling?
} else if (node.parentNode && node.parentNode.previousSibling) {
n = node.parentNode.previousSibling;
}
return isBarrierNode(n) ? null : n;
}
//REF: http://stackoverflow.com/questions/3127369/how-to-get-selected-textnode-in-contenteditable-div-in-ie
function getChildIndex(node) {
var i = 0;
while( (node = node.previousSibling) ) {
i++;
}
return i;
}
//All this code just to make this work with IE, OTL
//REF: http://stackoverflow.com/questions/3127369/how-to-get-selected-textnode-in-contenteditable-div-in-ie
function getTextRangeBoundaryPosition(textRange, isStart) {
var workingRange = textRange.duplicate();
workingRange.collapse(isStart);
var containerElement = workingRange.parentElement();
var workingNode = document.createElement("span");
var comparison, workingComparisonType = isStart ?
"StartToStart" : "StartToEnd";
var boundaryPosition, boundaryNode;
//Move the working range through the container's children, starting at
//the end and working backwards, until the working range reaches or goes
//past the boundary we're interested in
do {
containerElement.insertBefore(workingNode, workingNode.previousSibling);
workingRange.moveToElementText(workingNode);
} while ( (comparison = workingRange.compareEndPoints(
workingComparisonType, textRange)) > 0 && workingNode.previousSibling);
//We've now reached or gone past the boundary of the text range we're
//interested in so have identified the node we want
boundaryNode = workingNode.nextSibling;
if (comparison == -1 && boundaryNode) {
//This must be a data node (text, comment, cdata) since we've overshot.
//The working range is collapsed at the start of the node containing
//the text range's boundary, so we move the end of the working range
//to the boundary point and measure the length of its text to get
//the boundary's offset within the node
workingRange.setEndPoint(isStart ? "EndToStart" : "EndToEnd", textRange);
boundaryPosition = {
node: boundaryNode,
offset: workingRange.text.length
};
} else {
//We've hit the boundary exactly, so this must be an element
boundaryPosition = {
node: containerElement,
offset: getChildIndex(workingNode)
};
}
//Clean up
workingNode.parentNode.removeChild(workingNode);
return boundaryPosition;
}
//DEMO-ONLY code - this shows how the word is recombined across boundaries
function showBridge(word, nextText, prevText) {
if (nextText) {
$("#bridge").html("<span class=\"word\">" + word + "</span>  |  " + nextText.substring(0, 20) + "...").show();
} else if (prevText) {
$("#bridge").html("..." + prevText.substring(prevText.length - 20, prevText.length) + "  |  <span class=\"word\">" + word + "</span>").show();
} else {
$("#bridge").hide();
}
}

CSS:

.kinovar { color:red; font-size:20px;}.slavic { color: blue;}#result {top:10px;left:10px;}#bridge { top:10px; right:80px;}.floater { position: fixed; background-color:white; border:2px solid black; padding:4px;}.word { color:blue;}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="bridge" class="floater"></div> <div id="result" class="floater"></div> <div id="hoverText"><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"> <input value="Works around other tags!"><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.<input value="Works around inline tags too"></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></div>

(Remarque: j'ai pris la liberté d'appliquer des styles à la durée de balises qui ont été présents dans votre exemple de code HTML pour éclairer l'endroit où le texte nœud frontières.)

Solution 2 texte intégral de démonstration

(Travail en Chrome et IE jusqu'à présent. Pour le savoir, une méthode de IERange a dû être utilisé comme une cale pour la compatibilité inter-navigateur)

Il existe une API pour cela dans le courant de CSSOM Visualiser des projets: document.caretPositionFromPoint(x,y)

Vous devez vérifier que le navigateur prend en charge ce, bien que. Firefox 7 semble ne pas le soutenir à tous, alors que les rapports de bug indiquer Firefox 9. Chrome 14 prend en charge caretRangeFromPoint(x,y) qui est essentiellement le même, mais à partir d'une ancienne CSSOM projet.

Voici une solution simple qui fonctionne dans Chrome pour la plupart des cas:

function getWordAtPoint(x, y) {
var range = document.caretRangeFromPoint(x, y);
if (range.startContainer.nodeType === Node.TEXT_NODE) {
range.expand('word');
return range.toString().trim();
}
return null;
}

Je laisse le filtrage de la ponctuation et de correctement gérer la césure des mots comme exercice pour le lecteur :).

Vous aurait probablement pour briser le paragraphe, de sorte que chaque mot a été contenue à l'intérieur de son propre <span> élément, puis ajouter onmouseover attributs d'événement à chacun d'eux.

..Et je pense que vous voulez dire "<p>certains long texte</p>"; barres obliques inverses ne font pas partie de HTML.

JS:

function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
//REF: http://stackoverflow.com/questions/3127369/how-to-get-selected-textnode-in-contenteditable-div-in-ie
function getChildIndex(node) {
var i = 0;
while( (node = node.previousSibling) ) {
i++;
}
return i;
}
//All this code just to make this work with IE, OTL
//REF: http://stackoverflow.com/questions/3127369/how-to-get-selected-textnode-in-contenteditable-div-in-ie
function getTextRangeBoundaryPosition(textRange, isStart) {
var workingRange = textRange.duplicate();
workingRange.collapse(isStart);
var containerElement = workingRange.parentElement();
var workingNode = document.createElement("span");
var comparison, workingComparisonType = isStart ?
"StartToStart" : "StartToEnd";
var boundaryPosition, boundaryNode;
//Move the working range through the container's children, starting at
//the end and working backwards, until the working range reaches or goes
//past the boundary we're interested in
do {
containerElement.insertBefore(workingNode, workingNode.previousSibling);
workingRange.moveToElementText(workingNode);
} while ( (comparison = workingRange.compareEndPoints(
workingComparisonType, textRange)) > 0 && workingNode.previousSibling);
//We've now reached or gone past the boundary of the text range we're
//interested in so have identified the node we want
boundaryNode = workingNode.nextSibling;
if (comparison == -1 && boundaryNode) {
//This must be a data node (text, comment, cdata) since we've overshot.
//The working range is collapsed at the start of the node containing
//the text range's boundary, so we move the end of the working range
//to the boundary point and measure the length of its text to get
//the boundary's offset within the node
workingRange.setEndPoint(isStart ? "EndToStart" : "EndToEnd", textRange);
boundaryPosition = {
node: boundaryNode,
offset: workingRange.text.length
};
} else {
//We've hit the boundary exactly, so this must be an element
boundaryPosition = {
node: containerElement,
offset: getChildIndex(workingNode)
};
}
//Clean up
workingNode.parentNode.removeChild(workingNode);
return boundaryPosition;
}
function onClick(event) {
var elt = document.getElementById('info');
elt.innerHTML = "";
var textNode;
var offset;
//Internet Explorer
if (document.body.createTextRange) {
elt.innerHTML = elt.innerHTML+("*************** IE **************<br/>");
range = document.body.createTextRange();
range.moveToPoint(event.clientX, event.clientY);
range.select();
range = getTextRangeBoundaryPosition(range, true);
textNode = range.node;
offset = range.offset;
elt.innerHTML = elt.innerHTML + "IE ok, result: [" + escapeHtml(textNode.nodeName) + "]/[" + escapeHtml(textNode.textContent) + "] @" + offset + "</br>";
}
//Internet Explorer method 2
if (document.body.createTextRange) {
elt.innerHTML = elt.innerHTML+("*************** IE, Method 2 **************<br/>");
range = document.body.createTextRange();
range.moveToPoint(event.clientX, event.clientY);
range.select();
var sel = document.getSelection();
textNode = sel.anchorNode;
offset = sel.anchorOffset;
elt.innerHTML = elt.innerHTML + "IE M2 ok, result: [" + escapeHtml(textNode.nodeName) + "]/[" + escapeHtml(textNode.textContent) + "] @" + offset + "</br>";
}  
//Firefox, Safari
//REF: https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
if (document.caretPositionFromPoint) {
elt.innerHTML = elt.innerHTML+("*************** Firefox, Safari **************<br/>");  
range = document.caretPositionFromPoint(event.clientX, event.clientY);
textNode = range.offsetNode;
offset = range.offset;
elt.innerHTML = elt.innerHTML + "caretPositionFromPoint ok, result: [" + escapeHtml(textNode.nodeName) + "]/[" + escapeHtml(textNode.textContent) + "] @" + offset + "</br>";
//Chrome
//REF: https://developer.mozilla.org/en-US/docs/Web/API/document/caretRangeFromPoint
}
if (document.caretRangeFromPoint) {
elt.innerHTML = elt.innerHTML+("*************** Chrome **************<br/>");  
range = document.caretRangeFromPoint(event.clientX, event.clientY);
textNode = range.startContainer;
offset = range.startOffset;
elt.innerHTML = elt.innerHTML + "caretRangeFromPoint ok, result: [" + escapeHtml(textNode.nodeName) + "]/[" + escapeHtml(textNode.textContent) + "] @" + offset + "</br>";
}
}
document.addEventListener('click', onClick);

CSS:

#info {
position: absolute;
bottom: 0;
background-color: cyan;
}

HTML:

<div class="parent">
<div class="child">SPACE&nbsp;SPACE Bacon ipsum dolor amet <span>SPAN SPANTT SPOOR</span> meatball bresaola t-bone tri-tip brisket. Jowl pig picanha cupim SPAXE landjaeger, frankfurter spare ribs chicken. Porchetta jowl pancetta drumstick shankle cow spare ribs jerky
tail kevin biltong capicola brisket venison bresaola. Flank sirloin jowl andouille meatball venison salami ground round rump boudin turkey capicola t-bone. Sirloin filet mignon tenderloin beef, biltong doner bresaola brisket shoulder pork loin shankle
turducken shank cow. Bacon ball tip sirloin ham.
</div>
<div id="info">Click somewhere in the paragraph above</div>
</div>

Ma réponse est dérivé de Drakes' "Solution 2 - Signe d'inspection et DOM traversée". Merci beaucoup à Drakes pour pointer vers cette solution!

Cependant, il y a deux problèmes avec les Drakes solution 2 lorsque l'on travaille sur IE. (1) le décalage calculé est incorrect, et (2) trop complexe, beaucoup de code.

Voir ma démonstration sur JSFiddle à ici.

Pour le problème 1, si vous cliquez quelque part à propos de la dernière ligne du texte, par exemple quelque part dans "l'épaule de porc longe de shankle turducken tige de la vache. Bacon ballon de la pointe de surlonge de jambon.", vous pouvez remarquer le décalage calcul est différent avec IE (solution originale) et IE méthode 2 (ma solution). Aussi, les résultats de l'ei méthode 2 (ma solution) et à partir de Chrome, Firefox sont les mêmes.

Ma solution est bien plus simple. Le truc, c'est, après l'utilisation TextRange pour faire une sélection à la position X/Y, obtenir un type de IHTMLSelection en appelant le document.getSelection(). Cela ne fonctionne pas pour IE<9 mais si c'est OK pour vous, cette méthode est beaucoup plus simple. Un autre inconvénient est, avec IE la méthode des effets secondaires (comme la méthode originale) est le changement de sélection (c'est à dire perdre de l'utilisateur d'origine de la sélection).

  //Internet Explorer method 2
if (document.body.createTextRange) {
elt.innerHTML = elt.innerHTML+("*************** IE, Method 2 **************<br/>");
range = document.body.createTextRange();
range.moveToPoint(event.clientX, event.clientY);
range.select();
var sel = document.getSelection();
textNode = sel.anchorNode;
offset = sel.anchorOffset;
elt.innerHTML = elt.innerHTML + "IE M2 ok, result: [" + escapeHtml(textNode.nodeName) + "]/[" + escapeHtml(textNode.textContent) + "] @" + offset + "</br>";
}