Display input text in multiple styles?

Hi, community. I’d like users to enter text into a simple input field that goes to a database – but then when that text is displayed later on a different page, I’d like the first two words to appear in one font, and the words after the second word to appear in a different font.

I’ve not been able to achieve this effect. Can it be done without code? Thanks!

Hello Jeff

you can achieve by the following steps:

  • get the text from database
  • split it based on " " and save it in a array
  • style the words
  • set the html value of the texted to the styled result

Here’s how an example for code would look like:

let text1 ="the text you want from the database";
let textArr = text1.split(' '); // it will have all the words 
let finalText = "";

textArr.forEach((word, i) => {
    if (i > 1) {
            finalText = finalText + " " + word 
        }
    })
    
finalText = "<p> <font style= 'color:Red'>" + textArr[0] + " " + textArr[1] + " </font>" + finalText + '</p>';
$w('#text1').html = finalText;

Best

Massa

Thank you. As a non-coder, this is beyond my comprehension.

In the first line of code, how would “the text you want from the database” get handled automatically? I have an always-updating database and need the formatting to be automated. Is this possible? Thanks!

Hello jeff

to get a value from the database you have to look for it using Query based on a certain value.
read more about how to querying your database here .

if you want the value to be taken again every time you update the database you add database event (on ready, after save,…) you can read about it here

however this will require a little coding, always feel free to hire a wix expert ! - here

Good Luck!
Massa

Thank you for your help!