AX0101_4413 2021-10-10 13:01 采纳率: 95.7%
浏览 255
已结题

如何利用window.getSelection()获取选中的所有节点？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <div style="display: inline">测</div><div style="display: inline">试</div>
    <br>
    <div style="display: inline">测</div><div style="display: inline">试</div>
</div>
<input type="button" value="点我" onclick="f()">

<script>
    function f(){
        let a=window.getSelection();
        for(let i=0;i<a.length;i++){
            if(a[i].tagName==="DIV"){
                a[i].style.color="red";
            }
        }
    }
</script>

</body>
</html>

我希望a能是一个数组、包含选中范围内的所有节点，这样就可以使得点击按钮后、选中的所有文字都变成红色。
我知道我的a不是数组，我知道上面代码的语法是错的，但我不知道正确的语法是什么。所以我想问的是：如何让a是数组、包含选中范围内的所有节点？
（注：只考虑【被选中的所有节点都是同级的，不存在带有父节点与子节点的情况】且【每个节点只有一个字，不存在“选中这个节点中的部分文字”】的简单情形即可。）

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-10-10 13:26
    关注

    题主要的代码如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~
    代码来源：

    javascript - JS: Get array of all selected nodes in contentEditable div - Stack Overflow Hi I've been working with contentEditable for a while now and I think I have a pretty good handle on it. One thing that's evading me is how to get an array of references to all nodes that are parti... https://stackoverflow.com/questions/7781963/js-get-array-of-all-selected-nodes-in-contenteditable-div 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div style="display: inline">测</div><div style="display: inline">试</div>
        <br>
        <div style="display: inline">测</div><div style="display: inline">试</div>
    </div>
    <input type="button" value="点我" onclick="f()">
    <script>

        function nextNode(node) {
            if (node.hasChildNodes()) {
                return node.firstChild;
            } else {
                while (node && !node.nextSibling) {
                    node = node.parentNode;
                }
                if (!node) {
                    return null;
                }
                return node.nextSibling;
            }
        }

        function getRangeSelectedNodes(range) {
            var node = range.startContainer;
            var endNode = range.endContainer;

            // Special case for a range that is contained within a single node
            if (node == endNode) {
                return [node];
            }

            // Iterate nodes until we hit the end container
            var rangeNodes = [];
            while (node && node != endNode) {
                rangeNodes.push(node = nextNode(node));
            }

            // Add partially selected nodes at the start of the range
            node = range.startContainer;
            while (node && node != range.commonAncestorContainer) {
                rangeNodes.unshift(node);
                node = node.parentNode;
            }

            return rangeNodes;
        }

        function getSelectedNodes() {
            if (window.getSelection) {
                var sel = window.getSelection();
                if (!sel.isCollapsed) {
                    return getRangeSelectedNodes(sel.getRangeAt(0));
                }
            }
            return [];
        }

        function f() {
            let a = getSelectedNodes();
            console.log(a)
            for (let i = 0; i < a.length; i++) {
                if (a[i].tagName === "DIV") {
                    a[i].style.color = "red";
                }
            }
        }
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月18日
  • 已采纳回答 10月10日
  • 创建了问题 10月10日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改