我遇到以下问题 - 我正在尝试选择跨多个 div 的跨度内的文本。举个例子
<div>asd<span>fgh</span></div>
<div><span>qwerty</span></div>
<div><span>uio</span>asd</div>
现在在这种情况下,如果用户单击单词内部的某个位置,qwerty
我想选择文本“fghqwertuio”-> 所有相邻的跨度。我正在使用以下代码来执行此操作:
var range = document.caretRangeFromPoint(lastTappedX, lastTappedY);
range.selectNodeContents(range.startContainer);
window.getSelection().addRange(range);
var containerNodes = document.body.children[0].children;
var whichChild = -1;
for ( var i = 0; i < containerNodes.length; ++i) {
if (containerNodes[i] === range.startContainer.parentNode.parentNode) {
whichChild = i;
break;
}
}
if (whichChild === -1) {
console.log("couldn't find the highlighted div");
}
// go right the dom tree
for ( var i = whichChild + 1; i < containerNodes.length; ++i) {
var containerChildren = containerNodes[i].children;
if (containerChildren[0]
&& containerChildren[0].style['background-color']) {
var newRange = document.createRange();
newRange.selectNodeContents(containerChildren[0]);
window.getSelection().addRange(newRange);
}
if (containerChildren.length > 1) {
break;
}
}
// go left the down tree
for ( var i = whichChild - 1; i >= 0; --i) {
var containerChildren = containerNodes[i].children;
if (containerChildren[containerChildren.length - 1].style['background-color']) {
var newRange = document.createRange();
newRange
.selectNodeContents(containerChildren[containerChildren.length - 1]);
window.getSelection().addRange(newRange);
}
if (containerChildren.length > 1) {
break;
}
}
当我记录发生的事情时 - 我正确地创建了包含我想要选择的文本的范围,但将它们添加到选择对象似乎不起作用。当前选择只是第一个添加的范围。任何有关如何解决此问题的帮助将不胜感激。