H5編輯器核心演算法和思想-遁地龍卷風

来源:http://www.cnblogs.com/resolvent/archive/2017/07/08/7138139.html
-Advertisement-
Play Games

代碼和特性在chrome49下測試有效。 文本渲染的本質是對文本節點的渲染,通過瀏覽器內置的對象Range可以獲得選擇的起始點、與終止點 getRangeObjec代碼如下 function getRangeObject(){ if(window.getSelection) { var select ...


代碼和特性在chrome49下測試有效。

文本渲染的本質是對文本節點的渲染,通過瀏覽器內置的對象Range可以獲得選擇的起始點、與終止點

 

var range = getRangeObject();
var start = range.startOffset,
end = range.endOffset;
var startContainer = range.startContainer;
var endContainer = range.endContainer;

getRangeObjec代碼如下

function getRangeObject(){

if(window.getSelection)
{
var selection = window.getSelection();
if(selection.rangeCount > 0)
{
return selection.getRangeAt(0);
}
}
else if(document.selection)
{
return document.selection.createRange(); 
}
return null;
};
View Code

 

  起始點始終在左面,終止點始終在右面,不受選擇方向的影響。
  只有當起始點的開頭或終止點的末尾是<br/>時,返回的不是文本節點,可以通過start,end確定br元素的位置分別是startContainer.childNodes[start],endContainer.childNodes[end-1]。返回的是文本節點start表示游標相對於起始文本節點所在的起始位置,end表示游標相對於終止文本節點所在的終止位置。

獲得下一個文本節點的演算法為

function getNextTextNode(startNode,dir = "nextSibling"){
    //記錄startNode變化之前的狀態,startNode變化後無效時便於狀態的回滾
    let unchangeNode = startNode;
    if(startNode.nodeType == 3){
        startNode = startNode[dir];
    }
    while (true){

        if(startNode == undefined){
            if(unchangeNode == undefined){
                //保護機制
                throw new Error("程式會陷入死迴圈");
                break;
            }
            /*
                startNode所在的父元素所有選中節點遍歷完畢,將sartNode指向父元素的兄弟節點
            */
            let parent = unchangeNode.parentElement;
            unchangeNode = parent;
            startNode = parent[dir];
        }
        else if(startNode.nodeType == 3){
            //文本節點則退出迴圈
            break;
        }
        else if(startNode.tagName == "BR"){
            //處理單標簽,避免不必要的迭代
            unchangeNode = startNode;
            startNode = startNode[dir];
        }
        else if(startNode.nodeType == 1){
            /*
                如果是雙標簽元素則進入
            */
            unchangeNode = startNode;

            if(dir == "previousSibling"){

                startNode = $(startNode).contents().last().get(0);
            }
            else if(dir == "nextSibling"){
                startNode = $(startNode).contents().first().get(0);
            }
            else {
                //便於錯誤的定位
                throw new Error("錯誤的遍歷方向:"+dir);
            }
        }
        else {
            //便於錯誤的定位
            throw new Error("不期待的元素類型=》"+startNode);

        }
    }
    
    return startNode;
    
}

  //上述函數用外部變數+while迴圈的方式取代遞歸,加入的保護機制減少誤用、潛在bug導致極差的體驗。
獲得起始節點和結束節點之間的所有文本節點

function getTextNodes(startTextNode,endTextNode){
    let textNodeArray = [];
    let node = startTextNode;
    while (true) {
        node = getNextTextNode(node);

        if(node == endTextNode){
            break;
        }
        textNodeArray.push(node);
    }
    
    return textNodeArray;

}

 贊賞支持


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 時間限制: 1 s 空間限制: 128000 KB 題目等級 : 大師 Master 題解 查看運行結果 時間限制: 1 s 空間限制: 128000 KB 題目等級 : 大師 Master 時間限制: 1 s 空間限制: 128000 KB 題目等級 : 大師 Master 時間限制: 1 s 時 ...
  • @WebServlet 作用 在Eclipse中創建Servlet後,Eclipse不會自動在web.xml中生成該Servlet對應的mapping信息,而是在Servlet代碼中加入註解@WebServlet。 @WebServlet 用於將一個類聲明為 Servlet,該註解將會在部署時被容器 ...
  • 一、一般介紹 STL(StandardTemplate Library),即標準模板庫,是一個具有工業強度的,高效的C++程式庫。它被容納於C++標準程式庫(C++Standard Library)中,是ANSI/ISOC++標準中最新的也是極具革命性的一部分。該庫包含了諸多在電腦科學領域里所常用 ...
  • numbers類型: 數字類型的數據有Byte,Short,Float,Int,Long,Double,這些類型在java中也都是基礎數據類型。 與java不同之處在於: Char類型已經不再是數字類型了。 在java之中基礎數據類型都對應有一個包裝類,如int,對應Integer,而在kotlin ...
  • JavaScript 是世界上最流行的,輕量級的編程語言。 這門語言可用於 HTML 和 web,更可廣泛用於伺服器、PC、筆記本電腦、平板電腦和智能手機等設備; JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、創建cookies,以及更多的應用。 系統的知識圖解: 在we ...
  • 他們可以存儲: 數組 json數據 圖片 腳本 樣式文件 ; 客戶端的存儲的兩個: 1.localStorage 沒時間限制的數據存儲() 方法有:.localStrage.getItem();localStrage.setItem();removeItem();localStrage.key()從 ...
  • JScookie 常用的3個預設函數(庫)無標題文檔記住用戶名學術或足球分析交流微信:chinamaths(進討論組) Don't hesitate to comment or add a like - Yours Bill Bill's技術博客 足球分析博客 足彩數據視頻 比爾極客日誌_博客園 比... ...
  • <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mappe ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...