最近作个小功能,功能效果如图:css

试想一下，若是在选择文本以后不只能得到对应文档片断，并且再得到文本对应的文档位置， 这样咱们才能给文档片断包裹类名再后插入原来的位置。html

这样的话我们先来学习DOM2和DOM3的几个概念浏览器

1. window.getSelection()

getSelection()方法，能够肯定实际选择的文本。 这个方法是 window 对象和 document 对象的属性，调用它会返回一个表示当前选择文本的 Selection对象。bash

Selection 对象都有getRangeAt属性。app

getRangeAt(index) ,返回索引对应的选区中的 DOM 范围。学习

这个属性,这个属性返回索引对应的选区中的 DOM 范围，是一个Range对象这样就记住了获取文档片断的位置。ui

2. Range.extractContents()

extractContents(),会从文档中移除范围选区,并返回范围的文档片断，这样就得到了想要的文档片断。this

3. Range.insertNode()

insertNode()，是在Range的起始位置插入节点的方法。详细属性能够自行参考MDN或者高程spa

接下来就上代码

//css
 .active {
        background: #00FF90;
    }

//html
 <div id="text">
    积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。
    故不积跬步，无以致千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。
    锲而舍之，朽木不折；持之以恒，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。
    蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。
 </div>

//js
function select() {
        //获取选中文本位置,返回Range对象
        let selectedRange = window.getSelection().getRangeAt(0);   
        //移除选区文档片断,并返回
        let selectedFragment = selectedRange.extractContents();     
        let span = document.createElement("span");    
        span.classList = 'active';
        //建立span标签添加想要的类名,名把返回的文档片断插入
        span.appendChild(selectedFragment);    
        selectedRange.insertNode(span);        //在获取的Range对象中插入span标签
        //再点击span标签,在其前面添加span标签内的文本,并删除这个span标签
        span.onclick = function(ev) {
            this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
            this.parentNode.removeChild(this);
        };
    }
    document.getElementById('text').onmouseup = function() {
        select();   
        //鼠标松开后取消浏览器默认的深蓝色选中样式
        window.getSelection().removeAllRanges();     
    };

复制代码

在线地址3d

如能对您有所帮助，实在是感到荣幸。若有不合理之处也请你们多多指点。 谢谢浏览。