Text highlighting - nschonni/wet-boew GitHub Wiki

français

This component automatically highlights certain words on a Web page. The words to highlight can be set through the query string.

Table of Contents Overview Benefits Recommended usage Implementation Example Examples Development Known Issues Version History

Project lead: Paul Jackson (@pjackson28)

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.

• 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

• 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

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.

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&#59;&#35&#59;61&#59&#59;avian%20influenza+world+cook+flu&amp&#59;&#35&#59;45&#59&#59;like%20symptoms+Don&amp&#59;&#35&#59;39&#59&#59;t%20Forget...+causes%20sickness%20in%20birds,%20it%20can%20also%20infect%20people.

Highlight example text that meets the search criteria

• English example
• French example

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

• js/workers/texthighlight.js - contains the JavaScript code for text highlighting
• js/sass/includes/_texthighlight.scss - contains the CSS for text highlighting

• Does not help the user to reach the highlighted words

• Texthighlight.js
• _texthighlight.scss