HTML Text Formatting with Wix Code

Ask the community
,
1

I have a seemingly pretty simple requirement that I cannot figure out.

Using Wix Code, I need to format a text string inside a repeater with two different colors.
I want the repeated sentence below to be black with the exception of the word “red”, which I want to be red.

$w(“#repeater1”).onItemReady( ($item, itemData, index) => {
repeatedText = $item(“#text225”);

$item(“#text225”).text = “The car is red.”

$item(“#text225”).html=
“” + $item(“#text225”).text.substring(0,11) + “” +
“” + $item(“#text225”).text .substring(11,15) + “”;

repeatedText.text = $item(“#text225”).text;
}

When I run this, it appears that only the first is being used and the entire sentence is black. If I switch the order of the colors, then the entire sentence is red. I have also checked the substring parameter here by commenting out the first and then the second and the repeater displays correctly as either “The car is” or as “red.”, respectively as it should, but only the color from the first being used.

One other point in terms of full disclosure…I have $w(“#repeater1”) (NOT the text field inside the repeater) tied to a dataset. It appears to be displaying the number of items in the data set correctly as well as overwriting the text field of #text225 correctly with “The car is red.”

I am probably missing something really simple here, but I just cannot figure it out. Any advice from a Wix HTML guru on how to pull this off would be most appreciated!

Thanks,
Jay

2

Hello Jay

Try using slice method instead; and you don’t have to set the repeater text to the value of text225 because they are the same item. try the following code, it should work this way :

$w("#repeater1").onItemReady( async ($item, itemData, index) => {
 const repeatedText = $item("#text225");

  $item("#text225").text="the car is red";

  $item("#text225").html="<span style='color:#000000; ' >"+ $item("#text225").text.slice(0,11) + "</span>" + 
  "<span style='color:#FF1F00; ' >" + $item("#text225").text.slice(11,15) + "</span>";
 
 // repeatedText.text=$item("#text225").text; // not needed 
  console.log( repeatedText.text);

} );

Best
Massa

3

Massa,
That worked perfectly…thank you for the great suggestion!
Jay