Range对象

作者: 不语翕 | 来源:发表于2020-02-16 20:36 被阅读0次

21. vba range
器-说明：ruby中的一些小知识点
(第三天)HTML5之Range对象(下)、Audio、Vide
HTML5--Range对象概念
html5之Range对象详解
Range对象
Range对象
Excel VBA -单元格的操作（01）
golang for range 2022-08-31
js复制文本

什么是Range对象

页面上一段连续的区域

如何使用

创建Range对象

  var rangeObj = document.createRange();

获取Selection中的某个range对象

var selection = document.getSelection();
if(selection.rangeCount>0)
{
    var range = selection.getRangeAt(0); 
}

选中某项元素内所有内容

    var div = document.getElementById("myDiv");
    //包含元素本身
    rangeObj.selectNode(div);
    //不包含元素本身
    rangeObj.selectNodeContent(div);

删除元素

  rangOjb.deleteContents();

指定位置的区域

  var div = document.getElementById("myDiv");
  var node = div.firstChild;
  range.setStart(node,num);    //起始位置
  range.setEnd(node,num);    //终止位置
  //其他还有：setStartBefore方法，setStartAfter方法，setEndBefore方法与setEndAfter方法

Clone Range

  rangeObj.selectNodeContents(document.getElementById("p"));
  var rangeClone = rangeObj.cloneRange();   //对当前range对象进行clone
  var docFragment = rangeObj.cloneContents();  //用于在页面上追加html

将Range对象所代表区域的HTML代码克隆到一个 DocumentFragment中

 <script>
        function moveContent()
        {
            var srcDiv = document.getElementById("srcDiv");
            var distDiv = document.getElementById("distDiv");
            var rangeObj = document.createRange();
            rangeObj.selectNodeContents(srcDiv);
            var docFragment = rangeObj.extractContents();
            distDiv.appendChild(docFragment);
        }
    </script>
    <div id="srcDiv" style="background-color: aqua;width: 300px;height: 50px;">这是一个等待被移动的文本</div>
    <div id="distDiv" style="background-color:blanchedalmond;width: 300px;height: 50px;"></div>
    <button onclick="moveContent()">移动文本</button>

将指定的节点插入到某个Range对象所代表的区域中

<body>
    <script>
        function moveButton()
        {
            var btn = document.getElementById("btn");
            var selection = document.getSelection();
            if(selection.rangeCount > 0)
            {
                var range = selection.getRangeAt(0);
                range.insertNode(btn);

            }
        }
    </script>
    <div id="myDiv" onmouseup="moveButton()" style="background-color: cadetblue; width: 200px;height: 200px;">
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    </div>
    <button id="btn">按钮</button>
</body>

位置判断

<body>
    <script>
        function testPlace()
        {
            var boldText = document.getElementById("boldText");
            var rangeObj = document.createRange();
            rangeObj.selectNodeContents(boldText.firstChild);
            var selection = document.getSelection();
            if(selection.rangeCount > 0)
            {
                var selRange = selection.getRangeAt(0);
                if(selRange.compareBoundaryPoints(Range.START_TO_END,rangeObj) <= 0)
                {
                    alert("选中文字在粗体前面")
                }
                else if(selRange.compareBoundaryPoints(Range.END_TO_START,rangeObj) >= 0)
                {
                    alert("选中文字在粗体后面");
                }
            }
        }
    </script>
    这是一段判断选中字符在<b id="boldText">粗体</b>前后位置的方法示例文字
    <button onclick="testPlace()">判断</button>
</body>