Hello,
I’m trying to highlight a word in my Text and I’m using the below code.
$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.
instead of:
$w('#text65').text
Use:
$w('#text65').html
In both places.
I tried using .html in both places as shown below. However, it didn’t work.
$w('#text65').html = $w('#text65').html.replace(new RegExp("carbon", "gi"), (match) => '<mark>${match}</mark>');
@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:
let newWord = "oxygen";
$w("#text1").html = $w("#text1").html.replace(/carbon/gi, `<mark>${newWord}</mark>`);
Be sure to use ` and not ’ for the new string.
@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. 
$w("#text1").html = $w("#text1").html.replace(/carbon/gi, `<mark>carbon</mark>`);
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?
This is the whole code.
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;
}
}
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
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?
@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.
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.
@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”
let res2 = str.replace(/and/gi, `<mark>${searchWord}</mark>`);
i need this…
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.
let toHighlight = "and";
let regex = new RegExp(toHighlight, "g");
$w("#text1").html = $w("#text1").html.replace(regex, `<mark>${toHighlight}</mark>`);
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…
new RegExp(toHighlight, "g");
Is it the only way, how to solve with your code-structure?
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…
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…
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…
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
THX!
@russian-dima if you want to directly insert a variable use this code
new RegExp( '\\/variable\\:\\w*$' )
You’re essentially creating a new RegExp object.
Thx! Now i know why i could not get it to work. Have lack of knowledge in this section 
I should change it 
@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:
and here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp
and here:
@jonatandor35
Very nice!
THX J.D.
Hi,
someone succeeded to replace the text as highlighted but not changing the text format?