दिलचस्प पोस्ट
जावास्क्रिप्ट दोनों में "ऑब्जेक्ट इंस्टॉलेशन फंक्शन" और "फंक्शन इंस्टॉलेशन ऑफ ऑब्जेक्ट" दोनों में क्यों सच हो? कॉलिंग सेटेट को तुरंत राज्य बदलना नहीं है HTML में प्रदर्शित करने के लिए ऊपर / नीचे त्रिकोण (बिना स्टेम के तीर) के लिए कौन-से पात्रों का उपयोग किया जा सकता है? दो संबंधित एरेज़ को छंटनी डिस्प्ले में अंतर: इनलाइन-फ्लेक्स और डिस्प्ले: फ्लेक्स प्रतिनिधियों और घटनाओं के बीच अंतर क्या हैं? जावास्क्रिप्ट का सबसे अधिक पूर्णांक मान क्या है, जो सटीकता को खोने के बिना एक नंबर पर जा सकता है? कमांड लाइन का उपयोग कर इसे शुरू करने के बाद एक प्रक्रिया के एसटीडीईआरआर / एसटीडीओओटी को पुनर्निर्देशित करें? मैं जावा में सभी शून्य के साथ एक ArrayList को कैसे आरंभ कर सकता / सकती हूं? इकाई फ़्रेमवर्क में डालने का सबसे तेज़ तरीका जावा: एक बड़ी फ़ाइल की पिछली एन लाइनें पढ़ें अद्वितीय / यादृच्छिक नामों के साथ फाइलें स्टोर करें जावास्क्रिप्ट में तेजी से स्थिर सॉर्टिंग एल्गोरिथ्म कार्यान्वयन फ़ोकस पर क्लिक करने योग्य TextView का रंग बदलें और क्लिक करें? Php स्ट्रिंग से नियंत्रण अक्षर निकालें

JavaScript का उपयोग कर कर्सर के तहत एक शब्द कैसे प्राप्त करें?

अगर मैं उदाहरण के लिए है

<p> some long text </p> 

मेरे एचटीएमएल पेज पर, मैं कैसे जान सकता हूँ कि माउस का कर्सर 'टेक्स्ट' के ऊपर उदाहरण के लिए है?

Solutions Collecting From Web of "JavaScript का उपयोग कर कर्सर के तहत एक शब्द कैसे प्राप्त करें?"

इसके अलावा दो अन्य उत्तरों के लिए, आप अपने अनुच्छेदों को jQuery (या जावास्क्रिप्ट सामान्यतः) का उपयोग करके स्पेन्स में विभाजित कर सकते हैं।

इस तरह, आपको शब्दों के आस-पास के स्पैन के साथ अपने पाठ को आउटपुट करने के बारे में सोचने की आवश्यकता नहीं होगी। अपनी जावास्क्रिप्ट आपके लिए इसे करें

जैसे

 <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> 

ध्यान दें कि उपरोक्त कोड, जब यह काम करता है, आपके पैराग्राफ टैग्स के अंदर किसी भी HTML को छीन देगा।

jsFiddle उदाहरण

मेरा दूसरा उत्तर केवल फ़ायरफ़ॉक्स में काम करता है यह जवाब क्रोम में काम करता है (फ़ायरफ़ॉक्स में काम भी हो सकता है, मुझे नहीं पता।)

 function getWordAtPoint(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"); var ret = range.toString(); range.detach(); 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) { range.detach(); return(getWordAtPoint(elem.childNodes[i], x, y)); } else { range.detach(); } } } return(null); } 

अपने getWordAtPoint(e.target, ex, ey); हैंडलर में, getWordAtPoint(e.target, ex, ey); कॉल करें getWordAtPoint(e.target, ex, ey);

प्रस्तावना:

यदि आपके पास एकाधिक स्पैन और नेस्टेड एचटीएमएल अलग शब्द (या शब्दों में भी वर्ण) हैं, तो सभी उपरोक्त समाधानों को पूर्ण और सही शब्द वापस करने में परेशानी होगी

इनाम सवाल से यहां एक उदाहरण है: Х</span>rт0съ । कैसे ठीक से लौटने के लिए Хrт0съ ? इन मुद्दों को 2010 में वापस नहीं किया गया था, इसलिए मैं अब दो समाधान पेश करूंगा (2015)।


समाधान 1 – स्ट्रिप इनर टैग, प्रत्येक पूर्ण शब्द के चारों ओर लपेटते हैं:

एक समाधान पैराग्राफ के अंदर स्पैन टैग को छीनना है, लेकिन उनके पाठ को संरक्षित करना है। स्प्लिट शब्द और वाक्यांश इस प्रकार नियमित पाठ के रूप में एक साथ वापस जुड़ जाते हैं। प्रत्येक शब्द व्हाटस्पेस डिवीजन (केवल एक जगह नहीं) द्वारा पाया जाता है, और ये शब्द उन स्पेन्स में लपेटे जाते हैं जिन्हें व्यक्तिगत रूप से एक्सेस किया जा सकता है।

डेमो में, आप पूरे शब्द को उजागर कर सकते हैं और इस तरह पूरे शब्द का पाठ प्राप्त कर सकते हैं।


तस्वीर 0

कोड:

 $(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', ''); } ); }); 
 <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> 

मेरे ज्ञान के लिए, आप नहीं कर सकते

मैं केवल एक चीज के बारे में सोच सकता हूं कि प्रत्येक शब्द अपने तत्व में डाल दिया जाए, फिर उन तत्वों पर घटनाओं पर माउस लागू करें।

 <p><span>Some</span> <span>long</span> <span>text</span></p> <script> $(document).ready(function () { $('p span').bind('mouseenter', function () { alert($(this).html() + " is what you're currently hovering over!"); }); }); </script> 

वर्तमान सीएसएसओएम देखें मसौदा में इसके लिए एक एपीआई है: document.caretPositionFromPoint(x,y)

आप को यह जांचना होगा कि कौन सा ब्राउज़र इस का समर्थन करता है, हालांकि। फ़ायरफ़ॉक्स 7 यह बिल्कुल भी समर्थन नहीं करता है, जबकि बग की रिपोर्टों से पता चलता है कि फ़ायरफ़ॉक्स 9 होगा क्रोम 14 caretRangeFromPoint(x,y) का समर्थन करता है जो अनिवार्य रूप से समान है, लेकिन पुराने एसएसओएसएम प्रारूप से।

यहाँ इनाम के लिए समाधान है

जैसा कि आप chrisv द्वारा सुझाव दिया है, आप document.caretRangeFromPoint (क्रोम) या document.caretPositionFromPoint (फ़ायरफ़ॉक्स) का उपयोग कर सकते हैं। मुझे लगता है कि यह समाधान आपके प्रश्न का बेहतर उत्तर देता है क्योंकि यह आपके टेक्स्ट या डोम को बदल नहीं सकता है।

यह फ़ंक्शन डीओएम को बदलने के बिना माउस कर्सर के नीचे शब्द वापस करता है:

Document.caretRangeFromPoint दस्तावेज़ से :

दस्तावेज़ इंटरफ़ेस के carerRangeFromPoint () विधि निर्दिष्ट निर्देशांक के तहत दस्तावेज़ खंड के लिए एक रेंज ऑब्जेक्ट देता है।

Document.caretPositionFromPoint दस्तावेज़ से :

इस विधि का उपयोग दो निर्देशांकों के आधार पर एक दस्तावेज़ में कैरेट स्थिति को प्राप्त करने के लिए किया जाता है। एक CaretPosition लौटा है, जिसमें पाया गया डोम नोड और उस नोड में ऑफसेट चरित्र शामिल है।

दो फ़ंक्शंस थोड़ा अलग हैं लेकिन वे दोनों इस पाठ में कर्सर की पाठ और ऑफसेट सहित नोड लौटे हैं। तो माउस के नीचे शब्द प्राप्त करना आसान है।

पूर्ण उदाहरण देखें:

 $(function () { function getWordUnderCursor(event) { var range, textNode, offset; if (document.body.createTextRange) { // Internet Explorer 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 ""; } } else if (document.caretPositionFromPoint) { // Firefox range = document.caretPositionFromPoint(event.clientX, event.clientY); textNode = range.offsetNode; offset = range.offset; } else if (document.caretRangeFromPoint) { // Chrome range = document.caretRangeFromPoint(event.clientX, event.clientY); textNode = range.startContainer; offset = range.startOffset; } //data contains a full sentence //offset represent the cursor position in this sentence var data = textNode.data, i = offset, begin, end; //Find the begin of the word (space) while (i > 0 && data[i] !== " ") { --i; }; begin = i; //Find the end of the word i = offset; while (i < data.length && data[i] !== " ") { ++i; }; end = i; //Return the word under the mouse cursor return data.substring(begin, end); } //Get the HTML in a div #hoverText and detect mouse move on it var $hoverText = $("#hoverText"); $hoverText.mousemove(function (e) { var word = getWordUnderCursor(e); //Show the word in a div so we can test the result if (word !== "") $("#testResult").text(word); }); }); // This code make it works with IE // REF: https://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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <b><div id="testResult"></div></b> <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"><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></div></div> 

आपको संभवत: पैराग्राफ को तोड़ना होगा ताकि प्रत्येक शब्द अपने स्वयं के अलग <span> तत्व के अंदर समाहित हो सके और फिर उनमें से प्रत्येक के लिए onmouseover घटना विशेषताएँ जोड़ दें

..और मुझे लगता है कि तुम्हारा मतलब है "<p> कुछ लंबा पाठ </ p>"; बैकस्लैश एचटीएमएल का हिस्सा नहीं हैं I

अरे हाँ! यहाँ हो रहा है!

सरल है और श्वेतपत्र जेक्यूरी या अन्य फ्रेमवर्क बेडलः https://jsfiddle.net/703c96dr/

यह प्रत्येक शब्द पर spans डाल दिया जाएगा और एक onmouseover और onomouseout समारोह जोड़ें। मैं इसे और अधिक उपयोगी बनाने के लिए एक साधारण वर्ग बना सकता हूं, लेकिन कोड इतनी सरल है कि कोई भी संपादित और उपयोग कर सकता है

 <p>This is my text example of word highlighting or, if you want, word hovering</p> <p>This is another text example of word highlighting or, if you want, word hovering</p> 

सरल कोड

 function onmouseoverspan(){ this.style.backgroundColor = "red"; } function onmouseoutspan(){ this.style.backgroundColor = "transparent"; } var spans,p = document.getElementsByTagName("p"); for(var i=0;i<p.length;i++) { if(p[i]==undefined) continue; p[i].innerHTML = p[i].innerHTML.replace(/\b(\w+)\b/g, "<span>$1</span>"); spans = p[i].getElementsByTagName("span") for(var a=0;a<spans.length;a++) { spans[a].onmouseover = onmouseoverspan; spans[a].onmouseout = onmouseoutspan; } } 

फ़ायरफ़ॉक्स में आप माउसमोव ईवेंट को हुक कर सकते हैं। कॉलबैक में एक तर्क है, ई। कॉलबैक में, यह करें:

 var range = HTTparent.ownerDocument.createRange(); range.selectNode(e.rangeParent); var str = range.toString(); range.detach(); 

अब str पूरे पाठ है कि माउस खत्म हो गया था। e.rangeOffset कि स्ट्रिंग के भीतर mousepointer का स्थान है। आपके मामले में, str "कुछ लंबा पाठ" होगा और e.rangeoffset 11 होगा यदि आप "पाठ" में "ई" पर थे

यदि आप मार्जिन में हैं तो यह कोड थोड़ा भ्रमित करेगा, उदाहरण के लिए जब माउस पॉइंटर टेक्स्ट के समान पंक्ति पर है, लेकिन उसके अंत के बाद इसे ठीक करने के लिए, आपको यह जांचना होगा कि वास्तव में आप पाठ के शीर्ष पर हैं। यहां परीक्षा है:

 if(e && e.rangeParent && e.rangeParent.nodeType == e.rangeParent.TEXT_NODE && e.rangeParent.parentNode == e.target) 

यह तकनीक फ़ायरफ़ॉक्स में काम करती है क्रोम में काम नहीं करता है

 function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&amp;") .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); 
 #info { position: absolute; bottom: 0; background-color: cyan; } 
 <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>