# Searched results highlight

**URL:** <https://community.weweb.io/t/searched-results-highlight/4563>\
**Category:** Ask us anything\
**Tags:** search\
**Created:** [September 25, 2023, 5:29am UTC](https://community.weweb.io/t/searched-results-highlight/4563 "2023-09-25T05:29:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mujtaba\_khan](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mujtaba\_khan](https://community.weweb.io/u/mujtaba_khan)\
**Post date:** [September 25, 2023, 5:29am UTC](https://community.weweb.io/t/searched-results-highlight/4563/1 "2023-09-25T05:29:49Z")

</div>

Hello community! what i want to do is that when the search button is clicked and all the search results are fetched, I want the search-bar value/ keyword on which the search has happened to be highlighted in the below results to show where that keyword is present. for example if i search hello and below is a certain paragraph i want the hello word to be highlighted wherever it occurs in search results.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [September 28, 2023, 3:06pm UTC](https://community.weweb.io/t/searched-results-highlight/4563/2 "2023-09-28T15:06:34Z")

</div>

Hi @mujtaba_khan 👋

Here’s a [short video](https://youtu.be/pz3LhropMiU) on how to do this. Bear in mind it will require some JavaScript.

Here’s the code snippet that’s shown in the video and that you can use as a template:

```js
const search = /* your search term variable */

var regEx = new RegExp("("+search.replace(/([\^\$\.\\\(\)\[\}\{\}\+\*\?\<\>\=\-\|\:\!\&])/g, '\\$1')+")" , "ig");

const sanitizedText = wwFormulas.sanitize(/* the result text displayed */)

return search ? sanitizedText.replace(regEx, `<span style="color:red; background: yellow">$1</span>`) : sanitizedText 

```

---

<div class="post-metadata">

**Author:** ![mujtaba\_khan](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mujtaba\_khan](https://community.weweb.io/u/mujtaba_khan)\
**Post date:** [September 28, 2023, 3:20pm UTC](https://community.weweb.io/t/searched-results-highlight/4563/3 "2023-09-28T15:20:07Z")

</div>

Thank You so much @Joyce I’ll try this

---

<div class="post-metadata">

**Author:** ![Philip1](https://avatars.discourse-cdn.com/v4/letter/p/b5ac83/32.png) [@Philip1](https://community.weweb.io/u/Philip1)\
**Post date:** [December 27, 2023, 11:05am UTC](https://community.weweb.io/t/searched-results-highlight/4563/4 "2023-12-27T11:05:51Z")

</div>

Hi Joyce,

Where to find a tutorial on how to implement Search and Result?

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [December 29, 2023, 1:21am UTC](https://community.weweb.io/t/searched-results-highlight/4563/5 "2023-12-29T01:21:19Z")

</div>

For future readers, I answered here: [Search with results](https://community.weweb.io/t/search-with-results/5976) 🙂

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [August 3, 2024, 5:31pm UTC](https://community.weweb.io/t/searched-results-highlight/4563/6 "2024-08-03T17:31:48Z")

</div>

Thanks for this, I actually always come back to this thread for the code snippet to higlight via regex because I’m lazy. I’ve even used it here 😃

> **[My video 🍷](https://www.tella.tv/video/clzedu4ae000p09mlho596y9f/view)**
>
> Video recording for work