js获取选中区域(window.getSelection的基本使用)

返回一个 Selection 对象,表示用户选择的文本范围或光标的当前位置。

const selection = window.getSelection()

1.toString()  

//光标选中的文本
const selectedText = selection.toString()

2.getRangeAt()

//返回一个包含当前选区内容的区域对象。
selection.getRangeAt()

//参数:index
/*该参数指定需要被处理的子集编号(从零开始计数)。如果该数值被错误的赋予了大于或等于 rangeCount 结果的数字,将会产生错误。*/

if(selection.value.rangeCount > 0){
/*返回选区开始的节点(Node) 因为通常情况下用户只能选择一个范围,所以只有一个选区(range),此方法一般为getRangeAt(0),其中包括了光标选择的起始位置和终止位置信息 */
   const range = selection.value.getRangeAt(0)
} 

//起始位置 & 结束位置
const { startOffset,endOffset } = range


//移除选区中的内容
range.deleteContents();
//将新的dom元素插入选区
range.insertNode(element);
// 移除所有选区内容
selection.removeAllRanges();
// 重设选区
selection.addRange(range)
//复制选中区域(包括结构如:<span style="color:red">哈哈哈</span>)
range.cloneContents()

//获取选区所处的元素
const element = range.commonAncestorContainer
//使用时可以判断是否具有父节点
const element = range.value.commonAncestorContainer;
// 过滤不是元素节点的情况
if(element.nodeType === Node.ELEMENT_NODE) {
  node.value = element
}else {
  node.value = element.parentElement
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值