有很多代码可以在页面中获取选择，但我想要一个代码来获取 div 内的选择，如果选择在我的 div 之外，则该函数必须返回空字符串；
有一个 jquery 插件只适用于 textarea 但不适用于 div。（这里）
谢谢
如何使用 jquery/javascript 在 div 中获取选择
IT技术
javascript
jquery
2021-02-25 06:34:04
3个回答
由于冗长的边界比较以及 IE 与其他浏览器采用不同的方法，这有点冗长，但在所有主要浏览器中都可以完成这项工作。它还处理 Firefox 中的多项选择。
jsFiddle：http : //jsfiddle.net/Q982A/2/
代码：
function getSelectedTextWithin(el) {
var selectedText = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection(), rangeCount;
if ( (rangeCount = sel.rangeCount) > 0 ) {
var range = document.createRange();
for (var i = 0, selRange; i < rangeCount; ++i) {
range.selectNodeContents(el);
selRange = sel.getRangeAt(i);
if (selRange.compareBoundaryPoints(range.START_TO_END, range) == 1 && selRange.compareBoundaryPoints(range.END_TO_START, range) == -1) {
if (selRange.compareBoundaryPoints(range.START_TO_START, range) == 1) {
range.setStart(selRange.startContainer, selRange.startOffset);
}
if (selRange.compareBoundaryPoints(range.END_TO_END, range) == -1) {
range.setEnd(selRange.endContainer, selRange.endOffset);
}
selectedText += range.toString();
}
}
}
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
var selTextRange = document.selection.createRange();
var textRange = selTextRange.duplicate();
textRange.moveToElementText(el);
if (selTextRange.compareEndPoints("EndToStart", textRange) == 1 && selTextRange.compareEndPoints("StartToEnd", textRange) == -1) {
if (selTextRange.compareEndPoints("StartToStart", textRange) == 1) {
textRange.setEndPoint("StartToStart", selTextRange);
}
if (selTextRange.compareEndPoints("EndToEnd", textRange) == -1) {
textRange.setEndPoint("EndToEnd", selTextRange);
}
selectedText = textRange.text;
}
}
return selectedText;
}
或者，您可以使用我的Rangy库，代码变为：
function getSelectedTextWithin(el) {
var selectedText = "";
var sel = rangy.getSelection(), rangeCount = sel.rangeCount;
var range = rangy.createRange();
range.selectNodeContents(el);
for (var i = 0; i < rangeCount; ++i) {
selectedText += sel.getRangeAt(i).intersection(range);
}
return selectedText;
}
您可以使用：
var node = window.getSelection ?
window.getSelection().focusNode.parentNode:
document.selection.createRange().parentElement();
获取选择结束的元素。
然后您可以确定该元素是否在您的 div 内。
您可以通过使用文本选择插件来实现这一点 - http://plugins.jquery.com/node/7411
在绑定代码中，您可以询问事件目标以查看它是否在您需要的元素内。
<script type="text/javascript">
$(function() {
$(document).bind('textselect', function(e) {
if ($(e.target).attr("id") == "myPara") {
alert(e.text);
}
});
});
</script>
<p id="myPara">Lorem ipsum dolor sit amet consectetuer Lorem sapien hendrerit elit Cum. Morbi Curabitur convallis sagittis vitae sem parturient augue orci tortor eget. Et porttitor eros id consectetuer est molestie tellus fames netus nec. Ullamcorper id Nam eros sed nascetur Maecenas turpis at laoreet eleifend. Lorem id parturient dapibus Aenean cursus congue justo auctor pharetra orci. Hac amet.</p>
<p id="noSelect">Lorem ipsum dolor sit amet consectetuer Lorem sapien hendrerit elit Cum. Morbi Curabitur convallis sagittis vitae sem parturient augue orci tortor eget. Et porttitor eros id consectetuer est molestie tellus fames netus nec. Ullamcorper id Nam eros sed nascetur Maecenas turpis at laoreet eleifend. Lorem id parturient dapibus Aenean cursus congue justo auctor pharetra orci. Hac amet.</p>