使用Javascript確定文字樣式

Question

我目前正在使用可編輯的WebView，並提供控件以將所選文本更改為<H1> 〜 <H6> 。 默認的normal樣式文本僅為<div>
我想知道，如何使用javascript檢查文本對應的樣式類型（H1〜H6或DIV）...

我當前正在使用以下代碼將所選文本的文本樣式修改為<H1>

[webView stringByEvaluatingJavaScriptFromString:
                @"document.execCommand(\"FormatBlock\", false, \"<H1>\")"];

有沒有一種方法可以檢查使用javascript選中的文本是哪種樣式（無論是通過拖動還是僅通過光標的位置）？

Answer 1

HTML內容中的選擇可能跨越多個元素。 它也可能只包含start和end元素內的部分文本。 由於通常情況下，沒有單個元素名稱或CSS樣式應用於選擇內容，因此很難為您的問題提供確切的答案。 但是，希望下面提到的構建塊可以使您構建符合您意圖的行為。

由於您正在使用WebKit的Objective-C API，因此，我將描述這對Objective-C API以及JavaScript內的工作方式。 由於無法從JavaScript獲得編譯器反饋，因此使用Objective-C API可能會更愉快。

---

WebView中的選擇表示為DOMRange ，可以使用-[WebView selectedDOMRange]檢索。 選擇開始於-startContainer返回的元素， -startContainer偏移量為節點文本的-startOffset 。 選擇將繼續以DOM順序遍歷所有節點，直到-endOffset返回的節點內的offset -endOffset -endContainer 。

插入點表示為已折疊的DOMRange ，如collapsed屬性所指示。 在這種情況下， -startContainer和-endContainer應該返回相同的值，指示插入符號所在的節點，並且-startOffset和-endOffset將相等，並表示插入符號所在文本內容的偏移量。

一旦確定了所涉及的節點，就可以使用常規的DOM API來確定標簽名稱（ -[DOMNode tagName] ），並使用CSS對象模型API來檢索樣式信息（ -[DOMDocument getComputedStyle:pseudoElement:] ）。

---

從JavaScript方面來看，概念相似，但是在進入Range之前，存在Selection對象的中間步驟。

您使用window.getSelection()來檢索Selection對象。 該對象將包含零個或多個范圍，每個范圍代表一個選定的區域。 零范圍表示存在插入點，而不是實際選擇。 允許多個范圍，因為某些平台支持不連續選擇。

如上所述， Selection對象的rangeCount為零， isCollapsed值為true，以指示該選擇只是一個插入點。

當rangeCount不為零時，可以通過重復調用getRangeAt來遍歷Selection的范圍。 從這一點來說，你又回到了與工作Range具有相同接口的對象DOMRange在Objective-C的上述情況下，使用對象startContainer ， endContainer ， startOffset和endOffset性能。