選擇文本爲其添加類名

最近作個小功能,功能效果如圖:

試想一下，若是在選擇文本以後不只能得到對應文檔片斷，並且再得到文本對應的文檔位置， 這樣咱們才能給文檔片斷包裹類名再後插入原來的位置。

這樣的話我們先來學習DOM2和DOM3的幾個概念

1. window.getSelection()

---

getSelection()方法，能夠肯定實際選擇的文本。 這個方法是 window 對象和 document 對象的屬性，調用它會返回一個表示當前選擇文本的 Selection對象。

Selection 對象都有getRangeAt屬性。

getRangeAt(index) ,返回索引對應的選區中的 DOM 範圍。

這個屬性,這個屬性返回索引對應的選區中的 DOM 範圍，是一個Range對象這樣就記住了獲取文檔片斷的位置。

2. Range.extractContents()

---

extractContents(),會從文檔中移除範圍選區,並返回範圍的文檔片斷，這樣就得到了想要的文檔片斷。

3. Range.insertNode()

---

insertNode()，是在Range的起始位置插入節點的方法。詳細屬性能夠自行參考MDN或者高程

接下來就上代碼

//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();     
    };

複製代碼

在線地址

如能對您有所幫助，實在是感到榮幸。若有不合理之處也請你們多多指點。 謝謝瀏覽。