1.0.1 • Published 4 years ago
@mcsarathkumar/highlightjs v1.0.1
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 |