// 鼠标松开事件,获取选中区域
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
}
}