Text highlighting

Questions or comments?

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.

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

Use when

Non-text contrast

According to Understanding Success Criterion 1.4.11: Non-text Contrast, the contrast ratio is required to be at least 3:1.

The background color used for highlight is #ffff00 and the font color is #000000, resulting in ratio of 19.55:1

Working 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: ?txthl=avian%20influenza+world+cook+flu-like%20symptoms+Don't%20Forget...+causes%20sickness%20in%20birds,%20it%20can%20also%20infect%20people.

Highlight example text that meets the search criteria

How to implement

  1. Define your search area. Add the wb-txthl class to the tag whose contents you want to search in.
  2. Specify the search criteria in a URL query string. Add txthl=<text_1>+<text_2>+<text_3> to the query string.
    Note: HTML markup validation requires all spaces in links to be replaced by %20.

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

Configuration options

Option Description How to configure Values
txthl Query string parameter that specifies the search criteria for the text to highlight. Add txthl=<text_1>+<text_2>+<text_3> to the query string.
Note: HTML markup validation requires all spaces in links to be replaced by %20.		 Strings separated by + characters.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-txthl Triggered manually (e.g., $( ".wb-txthl" ).trigger( "wb-init.wb-txthl" );). Used to manually enhance an element with the Text highlighting plugin. Note: The Text highlighting plugin will be initialized automatically unless the element is added after the page has already loaded.
wb-ready.wb-txthl (v4.0.5+) Triggered automatically after the Text highlight plugin initializes. Used to identify where the Text highlight plugin was initialized (target of the event). 
$( document ).on( "wb-ready.wb-txthl", ".wb-txthl", function( event ) {
});
$( ".wb-txthl" ).on( "wb-ready.wb-txthl", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Text highlighting source code on GitHub

Date modified: