js让光标选择节点中部分文本
2023-06-13 09:11:18 时间
如题,代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">ruben</div>
<button>r</button>
<button>u</button>
<button>b</button>
<button>e</button>
<button>n</button>
<button>ALL</button>
<script>
// 获取所有按钮
document.querySelectorAll("button").forEach(btn => {
// 给按钮绑定点击事件
btn.addEventListener('click', function(event) {
// 获取按钮内的文本
const btnText = event.target.textContent
// 获取需要选中的节点
const container = document.querySelector("#container")
// 获取节点内文本
const contentText = container.textContent
// 获取selection对象
const selection = window.getSelection()
// 移除上次选择结果
selection.removeAllRanges()
// 创建范围对象
const range = document.createRange()
if (contentText.includes(btnText)) {
// 如果节点文本包含按钮内文本,就获取节点中的文本节点
const textNode = container.firstChild
// 获取 按钮内文本 在 节点文本 中 文本节点 的下标
const offsetStart = contentText.indexOf(btnText)
// 设置范围起始点
range.setStart(textNode, offsetStart)
// 设置范围结束点
range.setEnd(textNode, offsetStart + btnText.length)
} else {
// 如果内容不包含按钮中的内容,就直接选中整个节点
range.selectNode(container)
}
// 选中范围
selection.addRange(range)
})
})
</script>
</body></html>
效果:
Range
的MDN
:https://developer.mozilla.org/zh-CN/docs/Web/API/Range/setStart
Range.setStart()
Range.setStart()
方法用于设置Range
的开始位置。 如果起始节点类型是Text
、Comment
或CDATASection
之一,那么startOffset
指的是从起始节点算起字符的偏移量。 对于其他Node
类型节点,startOffset
是指从起始结点开始算起子节点的偏移量。 如果设置的起始位点在结束点之下(在文档中的位置),将会导致选区折叠,起始点和结束点都会被设置为指定的起始位置。
Selection
的MDN
:https://developer.mozilla.org/zh-CN/docs/Web/API/Selection
相关文章
- 用JS获取地址栏url参数的方法_js的url是啥
- 【说站】js中insert如何插入节点
- js中四舍五入的方法_JS取整
- 像素鸟html与js源码(4节课勉强做完)
- 原生 JS 实现 HTML 转 Markdown ,html2md.js
- JS removeChild()方法:删除节点
- 指定js可访问其它域名的cookie的方法
- js面向对象多种创建对象方法小结
- 一个简单的网站访问JS计数器刷新1次加1次访问
- 原生JS实现加入收藏夹的代码
- JSP中js传递和解析URL参数以及中文转码和解码问题
- js字符串转成JSON
- js实现表格字段排序
- js无刷新操作table的行和列
- js实现点击添加一个input节点
- js中的事件捕捉模型与冒泡模型实例分析
- js判断浏览器版本以及浏览器内核的方法