javascript 如何获取突出显示文本所在的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4636919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get the element in which highlighted text is in?
提问by Koes Bong
I am trying to learn how to write a bookmarklet where I can highlight some text, click on the bookmarklet and have it tell me what got highlighted. I can get that far, but next I want to know what element that text is in.
我正在尝试学习如何编写一个书签，我可以在其中突出显示一些文本，单击书签并让它告诉我突出显示的内容。我可以做到这一点，但接下来我想知道该文本所在的元素。
For example:
例如：
<div id="some-id">to be highlighted</div>
The bookmarklet code:
书签代码：
javascript:(function(){alert(window.getSelection();})()
If I highlight the text "to be highlighted" and then click on the bookmarklet, it will alert the text. But how can I get the element in which the text is in, in this case the element after that?
如果我突出显示“要突出显示”的文本，然后单击书签，它会提醒文本。但是我怎样才能得到文本所在的元素，在这种情况下是之后的元素？
So the flow is: highlight text, click bookmarklet, bookmarklet tells you what you highlighted and the element it's in.
所以流程是：突出显示文本，单击书签，书签会告诉您突出显示的内容及其所在的元素。
Thanks!
谢谢！
回答by Eineki
Try something similar to this to get the dom element that contains the selected text.
尝试类似的方法来获取包含所选文本的 dom 元素。
window.getSelection().anchorNode.parentNode
It works on firefox and Chrome, you should test it into the remaining browsers.
它适用于 firefox 和 Chrome，您应该在其余浏览器中对其进行测试。
It have a quirk, if you select text that beholds to more than an element, only the first one is returned. But maybe you can live with this.
它有一个怪癖，如果您选择的文本包含多个元素，则只会返回第一个。但也许你可以忍受这个。
Just for reference on what is the anchorNode property: http://help.dottoro.com/ljkstboe.php
仅供参考什么是 anchorNode 属性：http://help.dottoro.com/ljkstboe.php
On internet explorer this snippet should do the trick (I can't test it)
在 Internet Explorer 上，此代码段应该可以解决问题（我无法测试）
document.selection.createRange().parentElement();
as stated into http://msdn.microsoft.com/en-us/library/ms535872.aspxand http://msdn.microsoft.com/en-us/library/ms536654.aspx
如 http://msdn.microsoft.com/en-us/library/ms535872.aspx和 http://msdn.microsoft.com/en-us/library/ms536654.aspx 所述
A range explanation on quirksmode: http://www.quirksmode.org/dom/range_intro.html
关于 quirksmode 的范围解释：http://www.quirksmode.org/dom/range_intro.html
回答by Tim Down
You can do this relatively simply in all major browsers. Code is below, live example: http://jsfiddle.net/timdown/Q9VZT/
您可以在所有主要浏览器中相对简单地执行此操作。代码如下，现场示例：http: //jsfiddle.net/timdown/Q9VZT/
function getSelectionTextAndContainerElement() {
var text = "", containerElement = null;
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var node = sel.getRangeAt(0).commonAncestorContainer;
containerElement = node.nodeType == 1 ? node : node.parentNode;
text = sel.toString();
}
} else if (typeof document.selection != "undefined" &&
document.selection.type != "Control") {
var textRange = document.selection.createRange();
containerElement = textRange.parentElement();
text = textRange.text;
}
return {
text: text,
containerElement: containerElement
};
}
回答by qwertymk
I don't think you can, he only way to know which element is currently being used would be to use a onclick event on the element. Other than that there is no sure way. You can however search each element until you find an element with the same text,
我认为你不能，他知道当前正在使用哪个元素的唯一方法是在元素上使用 onclick 事件。除此之外没有确定的方法。但是，您可以搜索每个元素，直到找到具有相同文本的元素，
jQuery('*:contains(' + selected + ').
You can add an event to get the current element with this code though (untested)
您可以添加一个事件以使用此代码获取当前元素（未经测试）
var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++)
all[i].onclick = function(e){
window.selectedElement = all[i];
//preventDefault $ StopBubble &
return false;
}
And it will be stored in selectedElement
它将存储在 selectedElement 中
Ok try This:
好的试试这个：
var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++)
all[i].onclick = function(e) {
window.selectedElement = this;
((e && e.stopPropagation && e.stopPropagation()) ||
(window.event && (window.event.cancelBubble = true)));
return false;
}
DEMO: http://jsfiddle.net/HQC6Z/1/Better yet: http://jsfiddle.net/HQC6Z/
演示：http: //jsfiddle.net/HQC6Z/1/更好：http: //jsfiddle.net/HQC6Z/
After looking at the other answers, I take back my solution and offer theirs:
查看其他答案后，我收回我的解决方案并提供他们的：
How can I get the element in which highlighted text is in?
