Text highlighting

Overview

Project lead: Paul Jackson (@pjackson28)

Purpose

The text highlighting component highlights any text within a pre-defined area that matches case-insensitive search criteria specified through the URL's query string. Supports multi-word strings, including spaces and basic punctuation.

Benefits

  • Helps users to find certain words on a Web page
  • Words can be highlighted by default through the query string
  • Supports multi-word strings, including spaces and basic punctuation
  • Conforms to WCAG 2.0 AA
  • Uses WAI-ARIA to enhance accessibility
  • Progressive enhancement approach

Recommended usage

  • Highlighting search terms on a search results page
  • Highlighting key words on a Web page
  • Helping the user to find all instances of one or more words on a Web page

Implementation

  1. Define your search area. Add the wet-boew-texthighlight class to the tag whose contents you want to search in.
  2. Specify the search criteria in a URL query string. Add texthighlight=<text_1></text_1>+<text_2></text_2>+<text_3></text_3> to the query string.

Note 1: Search criteria using special regex characters such as ", |, ?, +, ( or ) may be partially or fully excluded from the results.

Note 2: HTML markup validation requires all spaces in links to be replaced by %20.

Example

Sample search criteria:

  • avian influenza
  • world
  • cook
  • flu-like symptoms
  • Don't Forget...
  • causes sickness in birds, it can also infect people.

Query string:

?texthighlight&amp;amp&#59;&amp;&#35;35&#59;61&amp;&#35;59&#59;avian%20influenza
+world+cook+flu&amp;amp&#59;&amp;&#35;35&#59;45&amp;&#35;59&#59;like%20symptoms
+Don&amp;amp&#59;&amp;&#35;35&#59;39&amp;&#35;59&#59;t%20Forget...
+causes%20sickness%20in%20birds,%20it%20can%20also%20infect%20people.

Highlight example text that meets the search criteria

Examples

Development

The code for text highlighting is located in several places within the source folder of WET:

Known Issues

  • Does not help the user to reach the highlighted words

Version History