Text highlighting

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

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

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: