// 获取选中的文字
var txt = window.getSelection()
alert(txt) // alert默认调用了toString()
// 清除选中的文字
window.getSelection().removeAllRanges()
选中文本相关
<body>
<p>这是一段默认被选中的文本</p>
<p>这是一段默认有开始截止位置的文本</p>
<div>
<span>太阳当空照，<br></span>
<span>花儿对我笑。<br></span>
<span>小鸟说：“早，早，早，<br></span>
<span>你为什么背上小书包？”<br></span>
<span>我去上学校，<br></span>
<span>天天不迟到。<br></span>
<span>爱学习，爱劳动，<br></span>
<span>长大要为祖国立功劳。<br></span>
</div>
</body>
- 设置文字选中效果
var range = document.createRange()
referenceNode = document.getElementsByTagName('p').item(0)
range.selectNodeContents(referenceNode)
var selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)
image.png
- 设置开始截止位置选中
//可用nodeType判断,如果起始节点类型是 Text， Comment, or CDATASection之一, 那么 startOffset指的是从起始节点算起字符的偏移量。
var range2 = document.createRange()
var startNode = document.getElementsByTagName('p').item(1).firstChild
var startOffset = 1
range2.setStart(startNode, startOffset)
var endOffset = 7
range2.setEnd(startNode, endOffset)
var selection2 = window.getSelection()
selection2.removeAllRanges()
selection2.addRange(range2)
image.png
- 跨段选中
// 对于其他 Node 类型节点， startOffset 是指从起始结点开始算起子节点的偏移量。
var range2 = document.createRange()
var startNode = document.getElementsByTagName('div').item(0)
//childNode会将html换行加进去
for (var i = 0; i < startNode.childNodes.length; i++) {
if (startNode.childNodes[i].nodeName == '#text' && !/\s/.test(startNode.childNodes.nodeValue)) {
startNode.removeChild(startNode.childNodes[i])
}
}
var startOffset = 3
range2.setStart(startNode, startOffset)
var endOffset = startNode.childNodes.length - 2
range2.setEnd(startNode, endOffset)
var selection2 = window.getSelection()
selection2.removeAllRanges()
selection2.addRange(range2)
image.png
- 跨段文字特定位置选中
//跨段文字特定位置选中
var range2 = document.createRange()
var startNode = document.getElementsByTagName('div').item(0)
//childNode会将html换行加进去
for (var i = 0; i < startNode.childNodes.length; i++) {
if (startNode.childNodes[i].nodeName == '#text' && !/\s/.test(startNode.childNodes.nodeValue)) {
startNode.removeChild(startNode.childNodes[i])
}
}
range2.setStart(startNode.childNodes[5].firstChild, 2)
range2.setEnd(startNode.childNodes[7].firstChild, 8)
var selection2 = window.getSelection()
selection2.removeAllRanges()
selection2.addRange(range2)
image.png
- input输入框文字选中
<input type="text" id="text" value="您好吗？" onfocus="getFocus()"/>
<script>
function getFocus() {
document.getElementById("text").select()
}
</script>
