選擇文本為其添加類名

MRZYD 發布于2019-08-26 12:10 / 1258人閱讀

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

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

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

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

1. window.getSelection()

getSelection() 方法，可以確定實際選擇的文本。
這個方法是 window 對象和 document 對象的屬性，調用它會返回一個表示當前選擇文本的 Selection對象。
每個 Selection 對象都有下列屬性。

anchorNode ：選區起點所在的節點。

anchorOffset ：在到達選區起點位置之前跳過的 anchorNode 中的字符數量。

focusNode ：選區終點所在的節點。

focusOffset ： focusNode 中包含在選區之內的字符數量。

isCollapsed ：布爾值，表示選區的起點和終點是否重合。

rangeCount ：選區中包含的 DOM 范圍的數量

addRange(range) ：將指定的 DOM 范圍添加到選區中。

collapse(node, offset) ：將選區折疊到指定節點中的相應的文本偏移位置。

collapseToEnd() ：將選區折疊到終點位置。

collapseToStart() ：將選區折疊到起點位置。

containsNode(node) ：確定指定的節點是否包含在選區中。

deleteFromDocument() ：從文檔中刪除選區中的文本，與 document.execCommand("delete",false, null) 命令的結果相同。

extend(node, offset) ：通過將 focusNode 和 focusOffset 移動到指定的值來擴展選區。

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

removeAllRanges() ：從選區中移除所有 DOM 范圍。實際上，這樣會移除選區，因為選區中至少要有一個范圍。

reomveRange(range) ：從選區中移除指定的 DOM 范圍。

selectAllChildren(node) ：清除選區并選擇指定節點的所有子節點。

toString() ：返回選區所包含的文本內容。

by-《javascript高級程序設計》

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

2. Range.extractContents()

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

3. Range.insertNode()

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

console一下看看上兩個屬性所在位置

接下來就上代碼

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

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

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

在線地址

結語

DOM2和DOM3的功能遠不止這些，它有著更加細膩和多樣的DOM操作，需要我們去發掘和熟悉。
本篇文章為本人的處女篇。在排版和表達上都還有欠缺，如能對您有所幫助，實在是感到榮幸。如有不合理之處也請大家多多指點。
謝謝瀏覽。

GPU云服務器云服務器文本選擇功能 java添加文本顯示 aspx 添加文本框 linux文本添加行數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108158.html

js高級程序設計筆記——DOM擴展

摘要：擴展為了實現更多的功能，會有一些標準或專有的擴展。標準擴展主要有選擇符元素遍歷一選擇符選擇符能夠允許代碼直接根據選擇符選擇與某個模式匹配的元素。 DOM擴展為了實現更多的功能，會有一些標準或專有的DOM擴展。標準擴展主要有： SelectorAPI（選擇符API） HTML5 Element Traversal（元素遍歷）一、選擇符API 選擇符API能夠允許J...

ningwang 2019-08-20 19:09 評論0 收藏0
《DOM編程藝術》中CSS—DOM的總結（三）

摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。－－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

王巖威 2019-08-29 10:54 評論0 收藏0
《DOM編程藝術》中CSS—DOM的總結（三）

摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。－－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

liukai90 2019-08-19 18:32 評論0 收藏0
讀后總結--精通css高級web標準解決方案（第二版）

摘要：無論是否移動，元素仍然占據原來的空間。絕對定位絕對定位使元素的位置與文檔流無關，因此不占據空間。為啥讀這本書現在前端圈子過于浮躁，掌握基礎無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘當然，根本原因還是覺得自己掌握不好開始總結吧~ 一. 基礎知識經過上世紀沒有 css的痛苦時的混沌時期，人們開始了進...

leone 2019-08-30 13:05 評論0 收藏0
OctoberCMS-8-組件

摘要：組件是可以配置的構建元素。可以附加到頁面布局部件中。組件是的核心特性。每個組件都可以對網站的功能進行擴展。組件可以在頁面上輸出代碼，但是這不是主要的，組件的一個重要功能是處理請求處理表單提交回調，處理頁面執行周期。 Components Components這里我們稱之為組件。組件是可以配置的構建元素。可以附加到Pages（頁面）、Layouts（布局）、Partials（部件）中。...

scq000 2019-07-01 10:08 評論0 收藏0