Using MatchAll and Substitute to dynamically change rich text

[s4grtz]

Hello everyone,

I've been trying to dynamically change the background color from a SPO List, Rich Text column in Power Apps.

Since I'm sure the clients using my app will copy and paste information from spreadsheets or emails into the rich text column, I just know that a white background color will be added eventually.

Hence, I wanted to dynamically find all values for "background-color" and replace with "transparent" value, and I've been considering using MatchAll function together with regex to then use Substitute function to modify the text.

This is the text I have been testing with:

<div class="ExternalClass8B50840B44B84255A1658269E57AB643"><div style="font-family&#58;Calibri, Arial, Helvetica, sans-serif;font-size&#58;11pt;color&#58;rgb(0, 0, 0);"><span style="color&#58;black;">​</span><span style="color&#58;black;">​Checking the automatic font family &amp; </span><span style="color&#58;rgb(179, 106, 226);"><b>font size change</b></span><span style="color&#58;black;">.&#160;<span style="color&#58;rgb(17, 17, 17);font-family&#58;Roboto, Helvetica, sans-serif;font-size&#58;16px;text-align&#58;left;background-color&#58;rgb(255, 255, 255);display&#58;inline !important;">HTML character decoding is</span><strong style="font-weight&#58;700;color&#58;rgb(17, 17, 17);font-family&#58;Roboto, Helvetica, sans-serif;font-size&#58;16px;text-align&#58;left;background-color&#58;rgb(255, 255, 255);"><span>&#160;</span>the opposite process of encoding.</strong><span style="color&#58;rgb(17, 17, 17);font-family&#58;Roboto, Helvetica, sans-serif;font-size&#58;16px;text-align&#58;left;background-color&#58;rgb(255, 255, 255);display&#58;inline !important;"><span>&#160;</span>The encoded characters are converted back to their original form in the decoding process. It decodes a string that contains HTML numeric character references and returns the decoded string. You can also choose to convert HTML code into</span></span><br></div></div>

I'm attaching how it looks like on screen without modification.

And my code so far is:

ClearCollect(ModifyTextColl, 'text to modify'.Text);

With(
    {
        BackgroundColorMatches: MatchAll(
            'text to modify'.Text,
            "background-color:rgb(+\d++\,+\d++\,+\d++\)", MatchOptions.BeginsWith
        )
    },
    ForAll(
        BackgroundColorMatches,
        Collect(ModifyTextColl, Substitute(
            Last(ModifyTextColl).Value,
            ThisRecord.FullMatch,
            "background-color:transparent;"
        ))
    )
);

This code, however, doesn't work (it IS my first attempt at MatchAll and regex) but I'd appreciate so so much some pointers or a better way to achieve this.

Many many thanks in advance!

[CarlosFigueira · Accepted solution]

You are in the right direction. There are some problems with your regular expression, and you should not use the MatchOptions.BeginsWith, since you want to find the 'background-color:rgb(...)' anywhere in the text, not only in the beginning, but updating it should solve your scenario: 

Collect(ModifyTextColl, Label1.Text);
With(
    {BackgroundColorMatches:MatchAll(Label1.Text, "background-color\&\#58\;rgb\(\d+,\s*\d+\,\s*\d+\);")},
    ForAll(
        BackgroundColorMatches,
        Collect(
            ModifyTextColl,
            Substitute(
                Last(ModifyTextColl).Value,
                ThisRecord.FullMatch,
                "background-color:transparent;"
            )
        )
    )
);
Set(converted, Last(ModifyTextColl).Value)

Hope this helps!

[s4grtz]

Hi Carlos,

Thank you so so much for your help! It works beautifully. May I ask you for further advice?

There are also a few other CSS properties to take care with the rich text so we are within the style guide of the company.  I'm going to have to change the font family to "Segoe UI", the font size to 15pt, and font color to rgb(58, 90, 120).

I've made an attempt again on regex, but I have a few questions regarding the implementation:

ClearCollect(ModifyTextColl, converted);

With(
    {
        BackgroundColorMatches: MatchAll(
            converted,
            "background-color\&\#58\;rgb\(\d+,\s*\d+\,\s*\d+\);"),
        FontColorMatches: MatchAll(
            converted,
            "color\&\#58\;.\;"),
        FontFamilyMatches: MatchAll(
            converted,
            "font-family\&\#58\;\p{L}+\s*\;" // incomplete implementation
        ),
        FontSizeMatches:MatchAll(
            converted,
            "font-size\&\#58\;\d\dpt;" //example: font-size:11pt;
        ) 
    },
    ForAll(
        BackgroundColorMatches,
        Collect(ModifyTextColl, Substitute(
            Last(ModifyTextColl).Value,
            ThisRecord.FullMatch,
            "background-color:transparent;"
        ))
    )
);

Set(converted, Last(ModifyTextColl).Value)

•  font size seemed pretty straight forward, but font color is tricky since it can be an rgb value or color name such as "black". I tried using the "Matches any character." regex value, but I tested this and it doesn't work.
• The same goes for font family, which can be of one font family value (such as "Segoe UI") or maybe 3, 4 

font-family:Roboto, Helvetica, sans-serif;
font-family:Calibri, Arial, Helvetica, sans-serif;​

• I'm also not sure where to add the additional properties to the ForAll function. Would you mind giving me some pointers on these topics?

Thank you so so much for your help!

[CarlosFigueira]

Regular expressions can be confusing - I would definitely suggest going to some page such as https://www.regextester.com/ where you can test your regular expressions before using them. For the font-family (and possibly color), I believe you can use the fact that the color and family don't have the ';' character in them, and they end with it, to create an expression such as "font-family\&\#58;[^;]+;" (where [^<character>]+ will match anything but <character> one or more times.

As far as using those inside a ForAll, you will need to have multiple ForAll "loops", one for each set of matches that you have, something along the lines of the expression below.

ClearCollect(ModifyTextColl, converted);

With(
    {
        BackgroundColorMatches: MatchAll(
            converted,
            "background-color\&\#58\;rgb\(\d+,\s*\d+\,\s*\d+\);"),
        FontColorMatches: MatchAll(
            converted,
            "color\&\#58\;.\;"),
        FontFamilyMatches: MatchAll(
            converted,
            "font-family\&\#58\;\p{L}+\s*\;" // incomplete implementation
        ),
        FontSizeMatches:MatchAll(
            converted,
            "font-size\&\#58\;\d\dpt;" //example: font-size:11pt;
        ) 
    },
    ForAll(
        BackgroundColorMatches,
        Collect(
            ModifyTextColl,
            Substitute(
                Last(ModifyTextColl).Value,
                ThisRecord.FullMatch,
                "background-color:transparent;"
            )
        )
    );
    ForAll(
        FontColorMatches,
        Collect(
            ModifyTextColl,
            Substitute(
                Last(ModifyTextColl).Value,
                ThisRecord.FullMatch,
                "font-color:black;"
            )
        )
    );
    ...
);

Set(converted, Last(ModifyTextColl).Value)

Hope this helps!

[Steve_Ford]

Sorry to resurrect an old thread folks but I'm having the same issue myself and can't quite get your solution working.

I have an 'HTML text' control embedded within a gallery pulling rich text through from a SharePoint List.

I'm using a variable to change the App properties from Light mode to Dark Mode or High Contrast mode which changes the background to black so I want to change all instances of black text to white text. This solution should work for me but I can't get it working 😣

Should I be updating the HtmlText control or the Gallery control?

Either way, is it the Color property, Item(s) property or Html property I need to add the modified code to please?

Thanks in advance! ❤️