@mcsarathkumar/highlightjs

HighlightJS

Simple, sleek and powerful library for customized text highlight in webpage

Status

Quick start

Several quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/mcsarathkumar/highlightjs.git
• Install with npm: npm install @mcsarathkumar/highlightjs
• Install with yarn: yarn add @mcsarathkumar/highlightjs

Questionnaire

• Want to provide functionality to your users to search & highlight any content in full / particular portion of webpage ?
• Want case sensitive search & highlight ?
• Want to apply customized styles on highlighted content ?
• Want to override browser search with customized search & highlight ?
• Need Library without dependencies and avoid code mess ?

Solution

Here is HighlightJS - A single line of Code can solve all the above problems

<input type="text" id="searchTerm">
<script src="https://cdn.jsdelivr.net/npm/@mcsarathkumar/highlightjs/dist/highlight.js"></script>
<script>
document.querySelector('#searchTerm').addEventListener('keyup', () => {
  const searchTerm = document.getElementById('searchTerm').value;
  $hljs.highlight({searchTerm: 'search me'});
});
</script>

Demo

Please check all components we have in action at https://mcsarathkumar.github.io/highlightjs/demo.html

API Accessors

$hljs.highlight() (or) hljs.highlight() (or) $hlJS.highlight() (or) hlJS.highlight()

API Inputs for highlight()

Input	isRequired	Datatype	Usage	Default	Example
searchTerm	required	string	Searches the given text in the target area		$hljs.highlight({   searchTerm: 'search me' })
selector	optional	string	Specify target in your webpage to search and highlight. Tag's ID to target, body tag is focused by default	body	$hljs.highlight({   searchTerm: 'search me',   selector: '#container' })
highlightClass	optional	string	CSS class to be applied on the highlighted content		$hljs.highlight({   searchTerm: 'search me',   highlightClass: 'bg-white text-primary' })
highlightStyle	optional	object	CSS style to be applied on the highlighted content	{   'background-color': '#FFF77D' }	$hljs.highlight({   searchTerm: 'search me',   highlightStyle: {     'background-color': 'aliceblue',      color: 'black'   } })
caseSensitive	optional	boolean	Case sensitive search	false	$hljs.highlight({   searchTerm: 'search me',   caseSensitive: true })
debounceTime	optional	number	On continuous keystroke in search term, time (in milli seconds) to wait before executing search	50	$hljs.highlight({   searchTerm: 'search me',   debounceTime: 100 })

---

API Output

Output	Datatype	Usage
count	number	Count of number of matched contents
disableCtrlFandFocusCustomInput(arg = true)	function	When the arg = #searchTerm (input tag id) Browser's Ctrl + F or F3 shortcuts properties are overridden and focussd to #searchTerm on pressing shortcuts, when arg = true, Browser's shortcuts are disabled, arg = false Enables browser shortcuts, if it was disabled by HighlightJS

---