# Highlight certain words in Text

**URL:** <https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [August 6, 2020, 6:40pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810 "2020-08-06T18:40:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hello67029](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@hello67029](https://forum.wixstudio.com/u/hello67029)\
**Post date:** [August 6, 2020, 6:40pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/1 "2020-08-06T18:40:40Z")

</div>

Hello,

I’m trying to highlight a word in my Text and I’m using the below code.

```javascript
$w('#text65').text = $w('#text65').text.replace(new RegExp("carbon", "gi"), (match) => '<mark>${match}</mark>');

```

This doesn’t seem to be working though. Any suggestions on how I can improve this code will helpful. Thank you.

---

<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:** [August 6, 2020, 10:05pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/2 "2020-08-06T22:05:37Z")

</div>

instead of:

```javascript
$w('#text65').text

```

Use:

```javascript
$w('#text65').html

```

In both places.

---

<div class="post-metadata">

**Author:** ![hello67029](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@hello67029](https://forum.wixstudio.com/u/hello67029)\
**Post date:** [August 7, 2020, 1:01am UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/3 "2020-08-07T01:01:43Z")

</div>

I tried using .html in both places as shown below. However, it didn’t work.

```javascript
$w('#text65').html = $w('#text65').html.replace(new RegExp("carbon", "gi"), (match) => '<mark>${match}</mark>');

```

---

<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:** [August 7, 2020, 11:41am UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/4 "2020-08-07T11:41:07Z")

</div>

@hello67029 I’m not sure what exactly you’re trying to do, but let say you want to replace every “carbon” by “oxygen” and highlight it.  
then:

```javascript
let newWord = "oxygen";
$w("#text1").html = $w("#text1").html.replace(/carbon/gi, `<mark>${newWord}</mark>`);

```

---

<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:** [August 7, 2020, 11:43am UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/5 "2020-08-07T11:43:04Z")

</div>

Be sure to use ` and not **’** for the new string.

---

<div class="post-metadata">

**Author:** ![hello67029](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@hello67029](https://forum.wixstudio.com/u/hello67029)\
**Post date:** [August 7, 2020, 2:37pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/6 "2020-08-07T14:37:15Z")

</div>

@jonatandor35 I’m trying to highlight certain words in the Text.  
So, it would essentially mean I’m just highlighting the word carbon, irrespective of the number of occurrences.

I tried the code you posted but it didn’t work. ☹

---

<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:** [August 8, 2020, 7:30pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/7 "2020-08-08T19:30:37Z")

</div>

@hello67029 ,

```javascript
$w("#text1").html = $w("#text1").html.replace(/carbon/gi, `<mark>carbon</mark>`);

```

---

<div class="post-metadata">

**Author:** ![hello67029](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@hello67029](https://forum.wixstudio.com/u/hello67029)\
**Post date:** [August 10, 2020, 4:42pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/8 "2020-08-10T16:42:02Z")

</div>

Hi! I tried this code too and it did not work.  
Is it because the text is linked to a column in my collection on a dynamic page?

---

<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:** [August 10, 2020, 5:35pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/9 "2020-08-10T17:35:56Z")

</div>

@hello67029 no. But post your full code and we’ll see.

---

<div class="post-metadata">

**Author:** ![hello67029](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@hello67029](https://forum.wixstudio.com/u/hello67029)\
**Post date:** [August 10, 2020, 5:47pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/10 "2020-08-10T17:47:51Z")

</div>

This is the whole code.

```javascript
let eRFullText;
let eRShortText;
let eRtxt1;
let eRtxt2;
let eRtxt3;
let eRtxt4;

$w.onReady(function () {
 const shortTextLength = 700;
 let item = $w("#dynamicDataset").getCurrentItem();

 if(item.emissionsReduction !== "")
    eRtxt1 = item.emissionsReduction;
 if(item.emissionsReduction2 !== "")
    eRtxt2 = item.emissionsReduction2;
 if(item.emissionsReduction3 !== "")
    eRtxt3 = item.emissionsReduction3;
 if(item.emissionsReduction4 !== "")
    eRtxt4 = item.emissionsReduction4;
  eRFullText = eRtxt1 + eRtxt2 + eRtxt3 + eRtxt4;
 if(eRFullText === "undefined") {
    eRFullText = "na";
    $w("#text65").text = eRFullText;
  }
 if(eRFullText !== "" && eRFullText !== "na") {
    eRShortText = eRFullText.substr(0, shortTextLength) + "...";
    $w("#text65").text = eRShortText;
  }
 let newWord = "carbon";
  $w("#text65").html = $w("#text65").html.replace(/carbon/gi, `<mark>${newWord}</mark>`);
  });
  
  export function button11_click(event) {
 if ($w("#text65").text === eRShortText) {
  $w("#text65").text = eRFullText;    
} else {
  $w("#text65").text = eRShortText;
}
}

```

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 10, 2020, 6:12pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/11 "2020-08-10T18:12:49Z")

</div>

Perhaps an example will help you.

I modified J.D.'s Code a little bit. It differs now a little bit, but should have the same function.

Take a look here…  
[https://russian-dima.wixsite.com/meinewebsite/highlight-mark-some-text](https://russian-dima.wixsite.com/meinewebsite/highlight-mark-some-text)

EDIT: I have test the CODE right now and have recognized that the search is working, but it find always just the first word. For example, if you are searching for “and”.  
“and” is given more then 1-time in the text, but it stops the search after the first search-value was found.

@J.D. how i could improve this in my code-version?

---

<div class="post-metadata">

**Author:** ![hello67029](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@hello67029](https://forum.wixstudio.com/u/hello67029)\
**Post date:** [August 10, 2020, 7:41pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/12 "2020-08-10T19:41:43Z")

</div>

@russian-dima I used your example and was able to make it work.  
Use /gi at the end where g stands for global and it’ll replace all occurrences, i stands for case-insenstive.

This is the code I used.

```javascript
let str = $w("#text65").text;
 let res = str.replace(/(^|\W)carbon($|\W)/gi, `<mark>${newWord}</mark>`);
  console.log(res);
  $w("#text65").html = res;

```

However, now when I use this code, my text loses all its formatting. For example, the color of the text is now different compared to the other text on the same page. And there are no paragraphs present either.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 10, 2020, 8:12pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/13 "2020-08-10T20:12:11Z")

</div>

@hello67029  
Yeah i am glad that i could help you, but i am still struggling with one issue.  
Perhaps you can now help me xDDDDD😂

It seems like you are working with REGX, i am not good in it.

My problem is surely a very simple one.  
Let use the same example with the search of the word —\> and

Can’t figure out, how to set a variable instea of —\> “and”

```javascript
let res2 = str.replace(/and/gi, `<mark>${searchWord}</mark>`);

```

i need this…

```javascript
let searchWord = $w('#input1').value
let res2 = str.replace(/searchWord/gi, `<mark>${searchWord}</mark>`);

```

Can not find the right syntax to implement a variable into the replace-command.

---

<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:** [August 10, 2020, 9:15pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/14 "2020-08-10T21:15:28Z")

</div>

@russian-dima

```javascript
let toHighlight = "and";
let regex = new RegExp(toHighlight, "g");
$w("#text1").html = $w("#text1").html.replace(regex, `<mark>${toHighlight}</mark>`);

```

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 10, 2020, 9:43pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/15 "2020-08-10T21:43:53Z")

</div>

@jonatandor35

Thx J.D.!  
I think i have to take a closer look to this.

I could convert it to my own code-version (even if i do not understand all steps).  
Thanks, for your help!

Can you explain a little this code-line…

```javascript
new RegExp(toHighlight, "g");

```

Is it the only way, how to solve with your code-structure?

```javascript
let toHighlight = "and";
let regex = new RegExp(toHighlight, "g");
$w("#text1").html = $w("#text1").html.replace(regex, `<mark>${toHighlight}</mark>`);

```

Or is it also possible to insert/edit/inject it directly here…

```javascript
let res2 = str.replace(/DIRECT-INJECTION-HERE/gi, `<mark>${searchWord}</mark>`);

```

My own solution (with your help), which now works like it should, looks like this…

```javascript
export function button66_click(event) {
 //let searchWord = $w('#input1').value
 let str = $w('#text1').text 
 let toHighlight = $w('#input1').value
 let regex = new RegExp(toHighlight, "g");
 let result = str.replace(regex, `<mark>${toHighlight}</mark>`);       
    $w("#text1").html=result
}

```

The line i do not understand is this one…

```javascript
let regex = new RegExp(toHighlight, "g");

```

Where i can get information for this?

And here the result…

[https://russian-dima.wixsite.com/meinewebsite/highlight-mark-some-text](https://russian-dima.wixsite.com/meinewebsite/highlight-mark-some-text)

THX!

---

<div class="post-metadata">

**Author:** ![hello67029](https://avatars.discourse-cdn.com/v4/letter/h/35a633/32.png) [@hello67029](https://forum.wixstudio.com/u/hello67029)\
**Post date:** [August 11, 2020, 12:41am UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/16 "2020-08-11T00:41:54Z")

</div>

@russian-dima if you want to directly insert a variable use this code

```javascript
new RegExp( '\\/variable\\:\\w*$' )

```

You’re essentially creating a new RegExp object.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 11, 2020, 7:03am UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/17 "2020-08-11T07:03:06Z")

</div>

@hello67029

Thx! Now i know why i could not get it to work. Have lack of knowledge in this section 😪😣 I should change it 😆

---

<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:** [August 11, 2020, 6:20pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/18 "2020-08-11T18:20:44Z")

</div>

@russian-dima so you can’t just put a variable as you wanted.  
You have to use RegExp object one way or another, as Hello mentioned.

You can read more about it here:

> **[Regular expressions - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)**
>
> Regular expressions are patterns used to match character combinations in strings.
> In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(),...

and here:  
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/RegExp/RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp)

> **[RegExp - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)**
>
> The RegExp object is used for matching text with a pattern.

and here:

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 11, 2020, 7:06pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/19 "2020-08-11T19:06:24Z")

</div>

@jonatandor35  
Very nice!  
THX J.D.

---

<div class="post-metadata">

**Author:** ![benyeffeta](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/benyeffeta/32/36351_2.png) [@benyeffeta](https://forum.wixstudio.com/u/benyeffeta)\
**Post date:** [March 2, 2023, 9:57pm UTC](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810/20 "2023-03-02T21:57:04Z")

</div>

Hi,  
someone succeeded to replace the text as highlighted but not changing the text format?

[Next page](https://forum.wixstudio.com/t/highlight-certain-words-in-text/42810.md?page=2)