# Highlighting text based on user input

**URL:** <https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [February 13, 2021, 5:48pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893 "2021-02-13T17:48:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![scottb](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/scottb/32/15328_2.png) [@scottb](https://forum.wixstudio.com/u/scottb)\
**Post date:** [February 13, 2021, 5:48pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/1 "2021-02-13T17:48:21Z")

</div>

I have the following code which highlights text (changes text color to RED) within my repeater for all the items returned from the database based on the user’s input value from an input element (#searchText).

```javascript
        
 $w("#repeater1").forEachItem( ($item, itemData, index) => {
            var src_str = $item("#text85").html;
            var term = $w("#searchText").value;
            term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
            var pattern = new RegExp("("+term+")", "i");
           src_str = src_str.replace(pattern, "<span style='color:red'>$1</span>");
           src_str = src_str.replace(/(<span style='color:red'>[^<>]*)((<[^>]+>)+)([^<>]*<\/span>)/,"$1</span>$2<span style='color:red'>$4");
           $item("#text85").html = (src_str);
} );

```

Code works great the first time the user selects a term in the input box.  
The second time the user searches a term, it highlights their selection again in the repeaters, but it also keeps the red highlights from the first search.

I am trying to figure out how to remove the span from the first time a users searches, so it only highlights the new search term items on subsequent searches. See screen shots below.

Any help is greatly appreciated!

First search:

 ![](https://us1.discourse-cdn.com/wix/original/3X/d/7/d7ec71a19b0830ee071f787ae98c2c4c765bddee.png)

Second search:

 ![](https://us1.discourse-cdn.com/wix/original/3X/9/5/9599283e7718dc13dc2f35334fc327ae3386791b.png)

---

<div class="post-metadata">

**Author:** ![scottb](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/scottb/32/15328_2.png) [@scottb](https://forum.wixstudio.com/u/scottb)\
**Post date:** [February 13, 2021, 6:27pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/2 "2021-02-13T18:27:43Z")

</div>

I’ve figured it out. I now clear any existing highlighted span tags first and then apply the new highlighted span tag to the new search value.

Here is the updated code.

$w( “#repeater1” ).forEachItem( ($item, itemData, index) =\> {  
**var** src\_str;  
src\_str = $item( “#text85” ).html;  
src\_str = src\_str.replace( ‘’,‘’ );  
 **var** term = $w( “#searchText” ).value;  
term = term.replace(/(\s+)/, “(\<[^\>]+\>)_$1(\<[^\>]+\>)_” );  
 **var** pattern = **new** RegExp( “(” +term+ “)” , “i” );  
src\_str = src\_str.replace(pattern, ‘$1’ );  
 **var** old\_str = src\_str;  
$item( “#text85” ).html = (src\_str);  
} );

---

<div class="post-metadata">

**Author:** ![scottb](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/scottb/32/15328_2.png) [@scottb](https://forum.wixstudio.com/u/scottb)\
**Post date:** [February 13, 2021, 8:56pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/3 "2021-02-13T20:56:08Z")

</div>

Next issue…running into an issue where if the user enters a term which is in one of the HTML tags of the text85 element, it breaks the page display.  
See screen shot. So the highlighting is working, but if any search term is part of an HTML tag, it really messes things up.  
I’ve tried pulling only the .text and appending the HTML code, but it is just not working yet.

 ![](https://us1.discourse-cdn.com/wix/original/3X/7/8/78324ce3d28afea5a9fb99460c82823ba7d5a83b.png)

---

<div class="post-metadata">

**Author:** ![scottb](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/scottb/32/15328_2.png) [@scottb](https://forum.wixstudio.com/u/scottb)\
**Post date:** [February 13, 2021, 9:26pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/4 "2021-02-13T21:26:57Z")

</div>

My temporary work-around is to evaluate the user’s search term and if it equals a few of the HTML tags which break the code, I display an error message. I also display the message if the search term is less than 4 characters long.

Not perfect, but should eliminate 99% of chances to break the page for now.

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [February 13, 2021, 9:56pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/5 "2021-02-13T21:56:06Z")

</div>

@scottb You can try:

```javascript
const value = $w("#searchText").value;
const p = src_str.split(">").filter(e => e).map(e => ({particle: e}));
let t = p.filter(e => !e.particle.trim().startsWith("<")).map(e => {e.particle = e.particle.split("<"); return e;}).map(e => {e.particle[0] = e.particle[0].replace(value, `<span style="color:red;">${value}</span>`); return e;});
t.forEach(e => e.particle = e.particle.join("<"));
$item("#text85").html = p.reduce((a,c) => a + c.particle + ">", "");

```

---

<div class="post-metadata">

**Author:** ![scottb](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/scottb/32/15328_2.png) [@scottb](https://forum.wixstudio.com/u/scottb)\
**Post date:** [February 13, 2021, 10:15pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/6 "2021-02-13T22:15:00Z")

</div>

@jonatandor35 Excellent…just 1 little thing. Getting an additional closing ‘\>’ at the end of the string.  
Thank you so much.

![](https://us1.discourse-cdn.com/wix/original/3X/b/6/b6bd8144253c39608ca27b63e0daba9dda8380c4.png)

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [February 13, 2021, 10:21pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/7 "2021-02-13T22:21:21Z")

</div>

@scottb I’ve updated the code above.

---

<div class="post-metadata">

**Author:** ![scottb](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/scottb/32/15328_2.png) [@scottb](https://forum.wixstudio.com/u/scottb)\
**Post date:** [February 13, 2021, 10:32pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/8 "2021-02-13T22:32:33Z")

</div>

@jonatandor35  
It was still showing up…but I updated this line to slice the last character…

```javascript
$item("#text85").html = p.reduce((a,c) => a + c.particle + ">", "").slice(0,-1);

```

Is there a way to make this all case insensitive?

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [February 13, 2021, 10:40pm UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/9 "2021-02-13T22:40:35Z")

</div>

@scottb  
I think that if you put:  
. filter ( e =\> e )  
in the second line (see update above) it will solve the extra “\>” (but your way can also work). It’s the same.  
If you wish to make a replace case-insensitive, you’ll have to use regex.  
Google “case insensitive replace method” and you’ll find plenty of explanations how to do it…

---

<div class="post-metadata">

**Author:** ![scottb](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/scottb/32/15328_2.png) [@scottb](https://forum.wixstudio.com/u/scottb)\
**Post date:** [February 14, 2021, 2:43am UTC](https://forum.wixstudio.com/t/highlighting-text-based-on-user-input/893/10 "2021-02-14T02:43:41Z")

</div>

@jonatandor35 Thanks again…I think I have it all working as designed now.