Question

I’m currently using a WebView which is editable, and offering controls to change the selected text to <H1> ~ <H6>. The default normal style text is just a <div>
I wanted to know, how I might use javascript to check what type of style (H1~H6 or DIV) the text corresponds to…

I’m currently using the following code to modify the text style of the selected text into a <H1>

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

Is there a way to check what style the text that is selected(whether it be by dragging, or just by the location of the cursor) is using javascript?

Answer 1

A selection in HTML content may span more than one element. It may also consist of only part of the text within the start and end elements. This makes it difficult to provide an exact answer to your question since in the general case there is not a single element name or CSS style applied to a selection. However, hopefully the building blocks mentioned below will allow you to construct behavior that matches your intent.

Since you’re working with the Objective-C API of WebKit I’ll describe how this works both for the Objective-C API and from within JavaScript. Using the Objective-C API can be more pleasant due to the compiler feedback that you’d not get with JavaScript.

---

The selection within a WebView is represented as a DOMRange and can be retreived using -[WebView selectedDOMRange]. The selection starts in the element returned by -startContainer at offset -startOffset in to the text of the node. The selection continues through all nodes in DOM order until offset -endOffset within the node returned by -endContainer.

An insertion point is represented as a DOMRange that is collapsed, as indicated by the collapsed property. In this case -startContainer and -endContainer should return the same values indicating the node in which the caret is, and -startOffset and -endOffset will be equal and represent the offset in to the text content at which the caret is.

Once you’ve determined the nodes involved you can use the regular DOM APIs to determine the tag name (-[DOMNode tagName]) and CSS Object Model APIs to retrieve style information (-[DOMDocument getComputedStyle:pseudoElement:]).

---

From the JavaScript side, the concepts are similar but there’s an intermediate step of a Selection object before you get to the Ranges.

You use window.getSelection() to retrieve a Selection object. This object will contain zero or more ranges, each representing a selected region. Zero ranges means there is an insertion point and not a real selection. More than one range is allowed as discontiguous selection is supported on some platforms.

As noted above, the Selection object will have a rangeCount of zero and an isCollapsed value of true to indicate that the selection is simply an insertion point.

When the rangeCount is non-zero, you can iterate over the ranges within the Selection by calling getRangeAt repeatedly. From that point you’re back to working with Range objects that have the same interface as the DOMRange objects described in the Objective-C case above, with startContainer, endContainer, startOffset and endOffset properties.