選擇文本為其添加類名

MRZYD 發(fā)布于2019-08-26 12:10 / 1365人閱讀

摘要：最近做個(gè)小功能功能效果如圖試想一下，如果在選擇文本之后不僅能獲得對(duì)應(yīng)文檔片段，而且再獲得文本對(duì)應(yīng)的文檔位置，這樣我們才能給文檔片段包裹類名再后插入原來(lái)的位置。選區(qū)中包含的范圍的數(shù)量將指定的范圍添加到選區(qū)中。

最近做個(gè)小功能,功能效果如圖:

試想一下，如果在選擇文本之后不僅能獲得對(duì)應(yīng)文檔片段，而且再獲得文本對(duì)應(yīng)的文檔位置，
這樣我們才能給文檔片段包裹類名再后插入原來(lái)的位置。

這樣的話咱們先來(lái)學(xué)習(xí)DOM2和DOM3的幾個(gè)概念

1. window.getSelection()

getSelection() 方法，可以確定實(shí)際選擇的文本。
這個(gè)方法是 window 對(duì)象和 document 對(duì)象的屬性，調(diào)用它會(huì)返回一個(gè)表示當(dāng)前選擇文本的 Selection對(duì)象。
每個(gè) Selection 對(duì)象都有下列屬性。

anchorNode ：選區(qū)起點(diǎn)所在的節(jié)點(diǎn)。
anchorOffset ：在到達(dá)選區(qū)起點(diǎn)位置之前跳過(guò)的 anchorNode 中的字符數(shù)量。

focusNode ：選區(qū)終點(diǎn)所在的節(jié)點(diǎn)。

focusOffset ： focusNode 中包含在選區(qū)之內(nèi)的字符數(shù)量。
isCollapsed ：布爾值，表示選區(qū)的起點(diǎn)和終點(diǎn)是否重合。
rangeCount ：選區(qū)中包含的 DOM 范圍的數(shù)量
addRange(range) ：將指定的 DOM 范圍添加到選區(qū)中。
collapse(node, offset) ：將選區(qū)折疊到指定節(jié)點(diǎn)中的相應(yīng)的文本偏移位置。
collapseToEnd() ：將選區(qū)折疊到終點(diǎn)位置。
collapseToStart() ：將選區(qū)折疊到起點(diǎn)位置。
containsNode(node) ：確定指定的節(jié)點(diǎn)是否包含在選區(qū)中。
deleteFromDocument() ：從文檔中刪除選區(qū)中的文本，與 document.execCommand("delete",false, null) 命令的結(jié)果相同。
extend(node, offset) ：通過(guò)將 focusNode 和 focusOffset 移動(dòng)到指定的值來(lái)擴(kuò)展選區(qū)。
getRangeAt(index) ：返回索引對(duì)應(yīng)的選區(qū)中的 DOM 范圍。
removeAllRanges() ：從選區(qū)中移除所有 DOM 范圍。實(shí)際上，這樣會(huì)移除選區(qū)，因?yàn)檫x區(qū)中至少要有一個(gè)范圍。
reomveRange(range) ：從選區(qū)中移除指定的 DOM 范圍。
selectAllChildren(node) ：清除選區(qū)并選擇指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)。
toString() ：返回選區(qū)所包含的文本內(nèi)容。

by-《javascript高級(jí)程序設(shè)計(jì)》

咱們需要用到的就是getRangeAt()這個(gè)屬性,這個(gè)屬性返回索引對(duì)應(yīng)的選區(qū)中的 DOM 范圍，是一個(gè)Range對(duì)象這樣就記住了獲取文檔片段的位置。
console一下看看這個(gè)屬性所在位置

2. Range.extractContents()

extractContents(),會(huì)從文檔中移除范圍選區(qū),并返回范圍的文檔片段，這樣就獲得了想要的文檔片段。

3. Range.insertNode()

insertNode()，是在Range的起始位置插入節(jié)點(diǎn)的方法。詳細(xì)屬性可以自行參考MDN或者高程

console一下看看上兩個(gè)屬性所在位置

接下來(lái)就上代碼

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

//html
 
    積土成山，風(fēng)雨興焉；積水成淵，蛟龍生焉；積善成德，而神明自得，圣心備焉。
    故不積跬步，無(wú)以至千里；不積小流，無(wú)以成江海。騏驥一躍，不能十步；駑馬十駕，功在不舍。
    鍥而舍之，朽木不折；鍥而不舍，金石可鏤。蚓無(wú)爪牙之利，筋骨之強(qiáng)，上食埃土，下飲黃泉，用心一也。
    蟹六跪而二螯，非蛇鱔之穴無(wú)可寄托者，用心躁也。
 

//js
function select() {
        let selectedRange = window.getSelection().getRangeAt(0);    //獲取選中文本位置,返回Range對(duì)象
        let selectedFragment = selectedRange.extractContents();     //移除選區(qū)文檔片段,并返回
        let span = document.createElement("span");    
        span.classList = "active";
        span.appendChild(selectedFragment);    //創(chuàng)建span標(biāo)簽添加想要的類名,名把返回的文檔片段插入
        selectedRange.insertNode(span);        //在獲取的Range對(duì)象中插入span標(biāo)簽
        span.onclick = function(ev) {
            //再點(diǎn)擊span標(biāo)簽,在其前面添加span標(biāo)簽內(nèi)的文本,并刪除這個(gè)span標(biāo)簽
            this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
            this.parentNode.removeChild(this);
        };
    }
    document.getElementById("text").onmouseup = function() {
        select();   
        window.getSelection().removeAllRanges();     //鼠標(biāo)松開(kāi)后取消瀏覽器默認(rèn)的深藍(lán)色選中樣式
    };

在線地址

結(jié)語(yǔ)

DOM2和DOM3的功能遠(yuǎn)不止這些，它有著更加細(xì)膩和多樣的DOM操作，需要我們?nèi)グl(fā)掘和熟悉。
本篇文章為本人的處女篇。在排版和表達(dá)上都還有欠缺，如能對(duì)您有所幫助，實(shí)在是感到榮幸。如有不合理之處也請(qǐng)大家多多指點(diǎn)。
謝謝瀏覽。