Skip to content

wstaeblein/texthighlighter

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

letter-spacing property included
36a7f27

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

Text Highlighter

Vanilla JS class to highlight search results in a textarea while maintaining the area's functionality.

Check out the DEMO

Features

  • No dependencies
  • Can be used in as many textareas as needed, just instantiate for each one.
  • Responsive. The markings will adjust to screen size, textarea size and scroll.
  • Keeps the original background from the textarea
  • Can be properly destroyed. Will remove all events and structure.
  • Can choose between case sensitive and insensitive search.

Use this class if you need to highlight search results or any text in a textarea. Its use is very straightforward, instantiate the class for the textarea you need and call the search method to highlight the text you pass in the first argument. The second argument is optional and takes a boolean that if true will make the search case sensitive. The default is case insensitive.

Usage & Code Examples

Add the following files to your project:

  • texthighlighter.js
  • texthighlighter.css
let tarea = document.getElementById('txt');
let hilite = new textHighlight(tarea);

let searchResult = 'Some Expression';
let sens = true;                        // Optional
hilite.search(searchResult, sens);

Should you need to clear out the highlights, call the clear method.

hilite.clear();

When it falls out of scope, just call the destroy method and all will be as it was before instantiation.

hilite.destroy();

About

This class was inspired by lonekorean's highlight-within-textarea JQuery plugin. Basically, I needed a similar functionality for a project but didn't want to include JQuery just for that and didn't find any other such code.

This class was tested in Chrome 110 and Firefox 110.

Licence

This project is licensed under the MIT Licence

About

Vanilla JS class to highlight search results in a textarea while maintaining the area's functionality

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published