JS获取鼠标选中的节点信息
JavaScript提供了getSelection()这个方法。是获取选中信息的一个很好用的方法。
使用场景：
当你想要获取你鼠标所选中内容的信息的时候就可以使用此方法了。
简单的HTML如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#editorBox {
width: 500px;
min-height: 200px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="editorBox" contenteditable="true">
hello world!
</div>
<button onclick="handleStyle('Bold')">加粗</button>
<button onclick="handleStyle('Italic')">斜体</button>
<button onclick="handleStyle('Underline')">下划线</button>
<button onclick="handleStyle('StrikeThrough')">删除线</button><br/>
字间距值：<input type="text" id="letterSpacingValue" value="50">px
<button onclick="setStyle('letterSpacing')">设置字体间距</button><br/>
<script>
//设置简单的字体风格
function handleStyle(type,val) {
document.execCommand('StyleWithCSS',true,true)
document.execCommand(type,false,val)
}
//设置比较复杂的字体样式，笔者只写了一个字间距，如果向设置其他的可按此规则重复利用此模块
function setStyle(type) {
let letterSpacingVal = document.getElementById('letterSpacingValue').value;
document.execCommand('styleWithCSS',true,true)
document.execCommand('Bold')
//获取选中的内容节点
let select = document.getSelection().anchorNode.parentElement;
select.style[type] = val + 'px';
document.execCommand('Bold')
}
</script>
</body>
</html>
效果如下：
现在我们将这个编辑器里面的内容变一变。
选中文本然后点击下面的按钮就可以变话你选中文本的样式了。
可以看到我们现在将hello变粗了然后加了个下划线。world变斜了然后加了个删除线。
我们现在想获取光标所在位置前一个字符的信息，那么我们就可以开始使用我们的getSelection() 这个方法了。
首先我们在id为editorBox的div上面监听俩个事件，一个是 mouseup事件，一个是keyup事件。
html代码：
<div
id="editorBox"
contenteditable="true"
onmouseup="getSelectionMessage()"
onkeyup="getSelectionMessage()"
>
hello world!
</div>
js代码：
function getSelectionMessage() {
let select = document.getSelection();
console.log(select)
}
当在id为editorBox的div当中触发onmouseup和onkeyup事件的时候就会输出getSelection获取到的信息。
接下来让我们把它展开一个一个的分析。
- anchorNode，翻译成中文就是锚节点。很多朋友可能和笔者一样不太清楚锚节点是什么意思，后来在笔者的项目开发过程中反复的测试中才知道他是鼠标起始位置选中的节点信息(相对应的是focusNode，鼠标结束时节点信息)。
起始位置就是鼠标按下那一刻所在的位置，结束位置就是鼠标松开那一刻所在的位置。
这样起始位置就是最后面的 “ ！” 所在的节点。结束位置就是 “ h ” 所在的节点。
这就感觉清晰很多了，锚节点代表的就是焦点前一个字符的所在节点的信息。
- baseURI：当前的url地址。
- childNodes：子节点集合
- data：文本数据
- firstChild和lastChild：就是代表第一个子节点和最后一个子节点
- length：这个length笔者还真没有弄懂它是代表什么的length，哪位大佬懂麻烦下方评论给笔者讲解一下，笔者感激不尽！
- nextElementSibling: 下一个兄弟元素
- nextSibling: 下一个兄弟节点
- nodeName:节点名字
- nodeType:节点类型（1代表元素节点，2代表属性节点，3代表文本节点）
- ownerDocument:所在的文档信息
- parentElement：所在的父节点元素信息
- parentNode：所在的父节点信息
- previousElementSibling：上一个兄弟元素
- previousSibling：上一个兄弟节点
- textContent：文本信息
- wholeText：整个文本信息
- anchorOffset：
光标起始位置在所在父元素的第几个下标处。 - baseNode：
根节点 - baseOffset：
- extentNode：
程度上节点 - extentOffset：
- focusNode：
光标结束位置所在父元素节点的信息，与anchorNode是相对应的。 - focusOffset：
光标结束位置在父元素的第几个下标处。 - rangeCount：
当前选中文本的个数。
这其中很多信息都是相通的，笔者就不在做无聊的复述，如果还有什么问题不是很了解可以下方评论，笔者每天都会回复的。
金牛区吴迪软件开发工作室博客
634