JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容

在JavaScript中，可以使用window.getSelection()方法来获取用户使用鼠标框选的文本。然后，可以通过Range对象的commonAncestorContainer属性来找到选中文本的最近的公共祖先节点，进而获取该节点的HTML或文本内容。

以下是一个简单的示例代码，展示了如何实现这个功能：

// 监听鼠标选择事件
document.addEventListener('mouseup', function() {
    // 获取选中的文本范围
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
        var range = selection.getRangeAt(0);
        // 获取最近的公共祖先容器
        var commonAncestor = range.commonAncestorContainer;
 
        // 检查公共祖先是否是节点（元素）
        if (commonAncestor instanceof Node) {
            // 如果是元素节点，获取该元素的HTML
            if (commonAncestor.nodeType === Node.ELEMENT_NODE) {
                var html = commonAncestor.outerHTML;
                console.log('选中的HTML:', html);
            } else {
                // 如果不是元素节点，获取节点文本
                var text = commonAncestor.textContent;
                console.log('选中的文本:', text);
            }
        }
    }
});

这段代码在用户完成鼠标框选操作后（即鼠标松开后），会打印出被框选的内容。如果框选的是一段文本，它会打印出选中的文本内容；如果框选的是HTML元素，它会打印出该元素的HTML。