Question

我正在寻找一个javascript来获取div在网页上的选择的起始位置，长度和div id。我找到的主题几乎满足了我的所有需求（Determine the position index of a character within an HTML element when clicked）。

它基本上是我想要的一切，除了我的div中有跨度，并且在跨度内或之后选择文本时，anchorOffset与div中的最后一个跨度相关。

我想通过以下方式解决这个问题：

1）获取parentNode.innerHTML并从中删除跨越开始和结束标记

2）使用substring（）

在1）内找到selection.anchorNode内容位置

3）添加2）+ AnchorOffset

虽然，这给我带来了两个问题： - 在2）中，如果我在一个跨度内单击，它可能包含在div内重复的文本，在这种情况下，有没有办法确保我得到正确的位置？

另外，还有其他方法可以建议您采取不同的方式吗？

提前感谢您的帮助！

javascript代码：

$('div, span').click( function () {
    var infos = getSelectionPosition(); 
});

function getSelectionPosition () {
    var selection, div_content, selection_start, selection_length, div_id;
    console.clear();
    selection = window.getSelection();
    div_id = selection.focusNode.parentNode.id;
    console.log("div_id is "+div_id);

    div_content = selection.focusNode.parentNode.innerHTML;
    div_content = div_content.replace("</span>","");
    div_content = div_content.replace(/<span class="source-in-text" id="s[0-9]*" style="">/,"");
    selection_start = div_content.search(selection.toString());
    console.log(selection_start);

    selection_length = selection.toString().length;
    console.log("selection_length is "+selection_length);
    return [div_id, selection_start, selection_length];

}

<div id="p2">Duis tincidunt risus eget metus semper porttitor. Etiam sapien erat, interdum eget tortor in, fermentum facilisis leo.  <span class="source-in-text" id="s1">Curabitur pulvinar </span> orci leo, non laoreet eros rhoncus vel. Vestibulum in nibh viverra, tristique dolor sed, consectetur nisl. Phasellus non sem ac enim ultricies lacinia mattis at nulla. Sed id vehicula orci. Nullam non nisi vitae lectus ultrices sodales.</div>

在div中找到div中的选择位置

0 个答案: