如何使用JavaScript获取光标下的单词？
如何使用JavaScript获取光标下的单词？
提问于 2010-03-15 08:27:28
例如，如果我有
<p> some long text </p>在我的HTML页面上，我如何才能知道鼠标的光标位于“文本”这个词的上方？
回答 9
Stack Overflow用户
回答已采纳
发布于 2010-03-15 08:38:27
根据其他两个答案，您可以使用jQuery (通常是javascript )将段落拆分成多个跨度。
那样的话，你就不需要考虑在输出文本时在单词周围加跨距了。让你的javascript为你做这件事。
例如：
<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。
Stack Overflow用户
发布于 2010-09-14 23:52:25
我的另一个答案只能在Firefox中使用。这个答案在Chrome中是有效的。(可能在Firefox中也能用，我不知道。)
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, e.x, e.y);
Stack Overflow用户
发布于 2010-03-15 08:32:37
据我所知，你不能。
我唯一能想到的就是把每个单词放在它们自己的元素中，然后将鼠标悬停在这些元素上。
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2444430
复制相关文章
相似问题
腾讯云开发者
