Demo

Question

如何获取用户所选文本的容器ID（例如，p或div的id）？

我想制作所选文本的列表，用户选择文本然后单击按钮添加到列表中。当用户点击列表中的文本时，我想突出显示原始选择的位置。我需要容器的id，因为所选文本可能不是唯一的，并且在文档中多次出现。

我得到的所选文字如Return HTML from a user-selected text

Answer 1

window.getSelection().anchorNode - 为您提供选择开始的DOM元素 window.getSelection().focusNode - 为您提供选择结束的DOM元素

参考：https://developer.mozilla.org/en-US/docs/Web/API/Selection?redirectlocale=en-US&redirectslug=DOM%2FSelection

Answer 2

以下是跨浏览器（未经测试）实现的一种方式

var getSelectionContainer = function() { 

    if (document.selection){  // IE
        return document.selection.createRange().parentElement();
    }

    var select = window.getSelection();
    if (select.rangeCount > 0) {
       return select.getRangeAt(0).startContainer.parentNode;
    }
};

Demo

（在5秒前选择一些文字，然后在控制台中查看）

链接

MDN window.getSelection

MDN selection.getRangeAt

MDN range.startContainer

MDN selection.rangeCount

javascript / jQuery：获取所选文本的容器

2 个答案:

Demo

链接