js 获取鼠标选中的区域（带节点）

最新推荐文章于 2024-09-02 15:52:41 发布

帅哥哥珍藏版

最新推荐文章于 2024-09-02 15:52:41 发布

阅读量2.5k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_52792889/article/details/126783534

版权

本文档介绍了如何在网页事件中捕捉鼠标松开时的选中区域，包括Range对象处理、位置判断、文本内容获取和区域元素提取。getPitchOn函数根据选中节点和内容进行深入分析，返回选中部分的完整节点或HTML片段。

摘要由CSDN通过智能技术生成

        // 鼠标松开事件，获取选中区域
        body.addEventListener('mouseup', () => {
            // this.getCurrentRange() 该方法用于获取 Range 对象
            const curRregion = this.getCurrentRange()

            const startLoc = curRregion.startOffset  // 起始位置
            const endLoc = curRregion.endOffset      // 终点位置
            const startNode = curRregion.startContainer   // 起始节点
            const endNode = curRregion.endContainer       // 终点节点
            // 判断鼠标是否选中区域
            if (startLoc !== endLoc || !startNode.isSameNode(endNode)) {
                console.log('1111')
                const text = curRregion.toString()    // 选中区域的文字
                const el = curRregion.commonAncestorContainer   // 选中区域的Element元素
                const contentHtml = curRregion.cloneContents()   // 选中区域的html
                this.selArea = getPitchOn(startNode, text, el, contentHtml)
                console.log(this.selArea)
            }
        }, false)

/**
 * 获取鼠标选中的区域
 * @param {起始节点} node 
 * @param {选中的文本} text 
 * @param {选中的节点} el 
 * @param {选中的html} content 
 */
export const getPitchOn = (node, text, el, content) => {
    // 如果选中的不是元素节点，直接返回文本
    if (el.nodeType != 1) {
        return text
    }

    // 获取选中的html信息
    let clen = 0
    let conId = []
    let conList = content.childNodes
    for (let i = 0; i < conList.length; i++) {
        if (conList[i].nodeType == 1) {
            clen++
            conId.push(conList[i].getAttribute('id'))
        }
    }

    // 获取选中的节点信息
    let elen = 0
    conList = el.childNodes
    for (let i = 0; i < conList.length; i++) {
        if (conList[i].nodeType == 1) {
            elen++
        }
    }

    // 如果 起始节点 和 选中的节点是同一个节点，并且子元素和选中的html子元素相同，获取整个节点
    // 否则 获取选中的html
    if (el.isSameNode(node.parentNode) && elen == clen) {
        let style = el.getAttribute('class')
        // 整个标签
        return stringIze(el)
    } else {
        // 内部标签
        let divNode = document.createElement('div')
        for (let i = 0; i < conId.length; i++) {
            let conNode = document.getElementById(conId[i])

            divNode.appendChild(conNode.cloneNode(true))

        }
        return divNode.innerHTML
    }
}