From ed7a199d358b163116cebd333b3451bdb09c5034 Mon Sep 17 00:00:00 2001
From: Walter Staeblein <walter@synergys.com.br>
Date: Tue, 3 Oct 2023 16:28:09 -0300
Subject: [PATCH] Destroy observer

---
 README.md           | 7 +++----
 texthighlighter.css | 2 +-
 texthighlighter.js  | 9 ++++++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index ebfbd34..21c649d 100644
--- a/README.md
+++ b/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');
diff --git a/texthighlighter.css b/texthighlighter.css
index 84216fe..64a0078 100644
--- a/texthighlighter.css
+++ b/texthighlighter.css
@@ -18,7 +18,7 @@
     display: none;
 }
 
-.hlta-container > .htla-textarea {
+.hlta-container > .hlta-textarea {
     position: relative;
     background: none transparent !important;
 }
diff --git a/texthighlighter.js b/texthighlighter.js
index 2cfe54f..3a20a1a 100644
--- a/texthighlighter.js
+++ b/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' : '';