Destroy observer

README.md

@@ -8,7 +8,7 @@ Since one can't style the text in a textarea, as it is not HTML, this class come
 ![Screenshot](screen.png)
 
 
-#### [CHECK OUT THE DEMO](https://wstaeblein.github.io/texthighlighter/)
+#### [CHECK OUT THE DEMO](https://wstaeblein.github.io/texthighlighter/){:target="_blank"}
 
 
 ## Features
@@ -26,8 +26,7 @@ Since one can't style the text in a textarea, as it is not HTML, this class come
 
 
 
-
-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.
+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. The last argument also takes a boolean that, if true, will perform a word search. Otherwise it's a free search, where any part of words can be matched.
 
 
 
@@ -54,7 +53,7 @@ To access how many occurrences were found, use:
 let count = hilite.count();
 ```
 
-You can navigate back and forth among the highlighted results using the prev and next methods. This navigation is cyclic, this means when the end is reached the next press takes you back to the begining and vice versa. Example below:
+You can navigate back and forth among the highlighted results using the prev and next methods. This navigation is cyclic, this means when the end is reached the next call takes you back to the begining and vice versa. Example below:
 
 ```javascript
 let btnPrev = document.getElementById('prev');

texthighlighter.css

@@ -18,7 +18,7 @@
     display: none;
 }
 
-.hlta-container > .htla-textarea {
+.hlta-container > .hlta-textarea {
     position: relative;
     background: none transparent !important;
 }

texthighlighter.js

@@ -20,7 +20,7 @@ class textHighlight {
             scroll: this.#scrollHandler.bind(this)
         }
 
-        this.ele.classList.add('htla-textarea');
+        this.ele.classList.add('hlta-textarea');
         this.ele.addEventListener('input', this.handlers.input);
         this.ele.addEventListener('scroll', this.handlers.scroll);
 
@@ -41,7 +41,8 @@ class textHighlight {
         this.container.append(this.backdrop);
         this.container.appendChild(this.ele);   
 
-        let obs = new ResizeObserver(this.#resizeObs.bind(this)).observe(this.ele);
+        let observer = new ResizeObserver(this.#resizeObs.bind(this));
+        observer.observe(this.ele);
         this.#inputHandler();
     }
 
@@ -78,6 +79,7 @@ class textHighlight {
     destroy() {
         this.ele.removeEventListener('input', this.handlers.input);
         this.ele.removeEventListener('scroll', this.handlers.scroll);
+        observer.disconnect();
 
         this.container.parentNode.insertBefore(this.ele, this.container);
         while (this.container.firstChild) {
@@ -112,8 +114,9 @@ class textHighlight {
     }
 
     #markText() { 
+        let txt = this.ele.value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
         if (this.searchArg) { console.log(this.ele.value)
-            let txt = this.ele.value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
             let searchArg = this.searchArg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
             let boundary = this.word ? '\\b' : '';