js中的Range

红太狼 2023-10-06 21:50 2阅读 0赞

### 删除文本 ###

<div id="div">这里是第一段文字</div>
    <button onclick="del()">删除</button>
    <script>
        function del() {
            var div = document.getElementById("div");
            var content = div.firstChild;
            if (content.nodeType == 3) {//node节点类型必须是text
                var range = document.createRange();
                range.setStart(content, 1);
                range.setEnd(content, 7);
                range.deleteContents();
            }
        }
    </script>

![b6becc9ee57b445b9750a25aec797e4d.png][] ![e069dbe85b1848adba432dfc2bbb92bf.png][]

### 选择文本 ###

<div id="div">这里是第一段文字</div>
    <button onclick="sel()">选择</button>
    <script>
        function sel() {
            var div = document.getElementById("div");
            var content = div.firstChild;
            if (content.nodeType == 3) {//node节点类型必须是text
                var range = document.createRange();
                range.setStart(content, 1);
                range.setEnd(content, 7);
                //range.deleteContents();//删除
                var sel = window.getSelection();
                sel.addRange(range);
            }
        }
    </script>

![b6becc9ee57b445b9750a25aec797e4d.png][] ![5374fe836dce4c9792edcaaed8b50d07.png][]

### 设置光标位置（IE浏览器） ###

节点类型为 input 或者 textarea

<input type="text" id="text1" value="1234567890">
    <select onchange="setPos(this.selectedIndex)">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <script language="javascript">
        function setPos(num) {
            var range = document.getElementById("text1").createTextRange();//CreateTextRange是 Microsoft IE特定功能
            range.moveStart('character', num);
            range.collapse(true);
            range.select();
        }
    </script>

![8d3ea98fabac47bfbd182c38a2c65bc1.png][]

### 设置光标位置、选择指定文本 ###

节点类型为 input 或者 textarea

<input type="text" id="test" value="1234567890">
    <button onclick="caret(3,5)">光标</button>
    <br>
    <br>
    <script>
        function caret(begin, end) {
            var node = document.getElementById("test");
            if (!node) return;
            if (node.setSelectionRange) { //现代浏览器
                node.focus();
                node.setSelectionRange(begin, end);
            } else if (node.createTextRange) { //IE678
                var range = node.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', begin);
                range.select();
            }
        }
    </script>

Range是一个抽象的接口，具有起始位置和结束位置。**如果起始位置等于结束位置，则形成光标**。  
其中Range.collapse(bool)就是让起始位置和结束位置重合，bool=true(默认值)，在起始位置重合；bool=false，在结束位置重合。  
Range.select()就是选择文本。

![8758df0174cd4f09876043088fb4bc42.png][] ![d544b9de583d4b6ba027011e784ef1f2.png][]

### js获取光标位置 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    </head>
    <body>
    <div id="div">你好啊123456789</div>
    <script>
        var range = document.createRange();
        //监听鼠标移动
        //整个页面使用document
        //'.btn-wrap,.mod-titlt,.top-wrap'
        $('#div').mousemove(function (event) {
            //2.计算坐标
            var event = event || window.event;
            var x = event.clientX;
            var y = event.clientY;
            var oPoint = document.elementFromPoint(x, y);
    
            let textContent = oPoint.textContent;
            var content = $('#div')[0].firstChild;
            //var range = document.createRange();
            var sel = window.getSelection();
            for (let i = 0; i < textContent.length; i++) {
                range.setStart(content, i);
                range.setEnd(content, i);
                sel.addRange(range);
                console.log(event.clientX)
                let selectionCoords = getSelectionCoords();
                if (selectionCoords >= x) {
                    range.setStart(content, i);
                    range.setEnd(content, i + 1);
                    sel.addRange(range);
                    console.log(i)
                    break;
                }
            }
    
        });
    
        function getSelectionCoords(win) {
            win = win || window;
            var doc = win.document;
            var sel = doc.selection, range, rects, rect;
            var x = 0, y = 0;
            if (sel) {
                if (sel.type != "Control") {
                    range = sel.createRange();
                    range.collapse(true);
                    x = range.boundingLeft;
                    y = range.boundingTop;
                }
            } else if (win.getSelection) {
                sel = win.getSelection();
                if (sel.rangeCount) {
                    range = sel.getRangeAt(0).cloneRange();
                    if (range.getClientRects) {
                        range.collapse(true);
                        rects = range.getClientRects();
                        if (rects.length > 0) {
                            rect = rects[0];
                        }
                        // 光标在行首时，rect为undefined
                        if(rect){
                            x = rect.left;
                            y = rect.top;
                        }
                    }
                    // Fall back to inserting a temporary element
                    if ((x == 0 && y == 0) || rect === undefined) {
                        var span = doc.createElement("span");
                        if (span.getClientRects) {
                            // Ensure span has dimensions and position by
                            // adding a zero-width space character
                            span.appendChild( doc.createTextNode("\u200b") );
                            range.insertNode(span);
                            rect = span.getClientRects()[0];
                            x = rect.left;
                            y = rect.top;
                            var spanParent = span.parentNode;
                            spanParent.removeChild(span);
    
                            // Glue any broken text nodes back together
                            spanParent.normalize();
                        }
                    }
                }
            }
            // return { x: x, y: y };
            return x;
        }
    </script>
    </body>
    </html>

![e7f58c591628425a86cd90a6006c4b69.gif][]

[Range.setStart() - Web API 接口参考 | MDN][Range.setStart_ - Web API _ _ MDN]

[b6becc9ee57b445b9750a25aec797e4d.png]: https://img-blog.csdnimg.cn/b6becc9ee57b445b9750a25aec797e4d.png
[e069dbe85b1848adba432dfc2bbb92bf.png]: https://img-blog.csdnimg.cn/e069dbe85b1848adba432dfc2bbb92bf.png
[5374fe836dce4c9792edcaaed8b50d07.png]: https://img-blog.csdnimg.cn/5374fe836dce4c9792edcaaed8b50d07.png
[8d3ea98fabac47bfbd182c38a2c65bc1.png]: https://img-blog.csdnimg.cn/8d3ea98fabac47bfbd182c38a2c65bc1.png
[8758df0174cd4f09876043088fb4bc42.png]: https://img-blog.csdnimg.cn/8758df0174cd4f09876043088fb4bc42.png
[d544b9de583d4b6ba027011e784ef1f2.png]: https://img-blog.csdnimg.cn/d544b9de583d4b6ba027011e784ef1f2.png
[e7f58c591628425a86cd90a6006c4b69.gif]: https://img-blog.csdnimg.cn/e7f58c591628425a86cd90a6006c4b69.gif
[Range.setStart_ - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Range/setStart