js让光标选择节点中部分文本

阿超

发布于 2022-08-21 14:34:04

2.8K0

发布于 2022-08-21 14:34:04

如题，代码：

<!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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-07-01，如有侵权请联系 cloudcommunity@tencent.com 删除

api