HTML5 编辑 API 之 Range 对象（一）

最新推荐文章于 2023-02-12 23:21:19 发布

老施同学

最新推荐文章于 2023-02-12 23:21:19 发布

阅读量551

点赞数 1

本文链接：https://blog.csdn.net/guofengs/article/details/51388257

版权

个人总结专栏收录该内容

34 篇文章 0 订阅

订阅专栏

</pre><pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 编辑 API 之 Range 对象（一）</title>
    <style>
        #content{
            width:100%;
            height: 50px;
            background-color:#cccccc;
        }
    </style>
</head>
<body>
    selection对象与range对象的引用
    <input type="button" value="click" οnclick="rangeTest()">
    <div id="showRange"></div>

    <div id="content">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
    <button οnclick="deleteRangeContent(true)">删除元素</button>
    <button οnclick="deleteRangeContent(false)">删除结点</button>

    <div id="myDiv">
        这段文字是用来删除的
    </div>
    <button οnclick="deleteChar()" value="delete">delete</button>
    <script>
        function rangeTest() {
            var html ;
            showRangeDiv = document.getElementById("showRange");
            selection = document.getSelection();//创建selection对象
            if(selection.rangeCount>0){
                /* 当用户没有按下鼠标时候，该参数的值为0.
             当用户按下鼠标的时候，该参数值为1.
             当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候，该参数值代表用户选取区域的数量。
             当用户取消区域的选取时，该属性值为1，代表页面上存在一个空的Range对象；*/
                html = "你选取了"+selection.rangeCount+"段内容<br/>";
                for(var i=0;i<selection.rangeCount;i++){
                    var range = selection.getRangeAt(i);//获取selection对象的range对象getRangeAt(index)
                    html+="第"+(i+1)+"段内容为：“"+range+"”<br/>";
                }
                showRangeDiv.innerHTML = html;
            }
        }
        function deleteRangeContent(onlyContent) {
            var getDiv = document.getElementById("content");
            var rangeObj = document.createRange();
            if(onlyContent){
                rangeObj.selectNodeContents(getDiv);
                rangeObj.deleteContents();//删除所选中的内容（结点或结点内内容）
            }else{
                rangeObj.selectNode(getDiv);
                rangeObj.deleteContents();
            }
        }
        function deleteChar() {
            var div = document.getElementById("myDiv");
            var textNode = div.firstChild;
            var rangObj = document.createRange();
            rangObj.setStart(textNode,0);
            rangObj.setEnd(textNode,4);
            rangObj.deleteContents();
        }
    </script>

</body>
</html>