If you want to highlight only one of the occurrences of the search term, and move the highlighting back and forward between all of the occurrences, you can do this as well. iCab Mobile is doing something like this as well: though it highlights all occurrences in yellow at the same time, you can jump between these occurrences and the current one if highlighted in another color.

What must be done here is to save all occurrences in an array while searching. And when you want to highlight item n, then just execute the “highlight code” from above for this one item. If you jump to another item, use the “unhighlight code” to remove the highlighting of the previous item and execute the highlight code for the new item again.

Thanks.

For example you can check if the element in which the text was found is one of those elements, which are never shown (like all elements within the HEAD section of the page), or if these elements have a CSS property “display” or “visibility” set to a value which makes the element invisible. For the latter use the function “getComputedStyle()” which also takes the inheritance of CSS properties into account…

  if (window.getComputedStyle(element, false).display == 'none'  ||
      window.getComputedStyle(element, false).visibility == 'hidden') {
     // element is not visible
  }

I came across a problem that I don’t know how to solve. A keyword can be hiding in elements that aren’t displayed on the web page. When the user steps through the keywords he shouldn’t have steps where nothing appears. Apple is very smart about this and somehow avoids the hidden keywords.

As an example, go to the link

http://www.azleg.state.az.us/FormatDocument.asp?inDoc=/ars/47/01101.htm&Title=47&DocType=ARS

and search for “code”. There are actually three instances of it but only two are visible. If you click on More Agencies > Executive you will see the bottom item in the dropdown menu is “Admin Code”. Your little algorithm finds this but Apple’s doesn’t, either in Safari or mobile Safari.

Any ideas on how to solve this would be appreciated. Thanks again.

Thank you dammy and Alexander.

JavaScript is able to get the selected text as raw text but also as a “range” object, which includes the first and last nodes which are covered by the text and also the offsets within these text nodes so you know exactly where exactly with these text nodes, the selection starts. Based on this information you can process the text and nodes depending of your requirements, but this can be complicated. The range can span many different block and inline elements and when manipulating the HTML code you may need to take care about the HTML structure as well. So you not only need to know much about JavaScript, but also much about HTML as well.

Highlighting a text the user has selected can be easy (when the text is completely inside a single text node) and you only need to add a new SPAN element like it is shown in this blog post, but it can also be extremly complicated (when the selected text spans multiple block and inline nodes). In this case you might have to create multiple SPAN elements in many of the involved nodes, make sure that inline and block element boundaries are preserved to avoid that the HTML code structure gets invalid and the layout of the page is destroyed.

I want a snippet to highlight a particular text which have been selected by user in UIWebView.
I am using AEPubreader which have same functions for search and highlight that you have provided.
Please help me out with. Basically I am an iPhone app developer, but no idea of javascript so I am little bit confused with it.
Thanks in advance.