[Here's How] Text pattern highlighter (@ mentions, emails, URLs, etc.)

[sudsy]

Originally posted as a reply to a forum query, I thought this might have broader appeal, so I’m posting it here as well…

If you need to highlight text that matches a specific pattern when displaying it in a text element, then using Bubble’s built-in regex and BBCode support offers one approach.

BBCode is just a lightweight markup language, and regex (which stands for “regular expressions”) was developed specifically for the purpose of matching patterns within strings of text.

 
Working example…

• Example: Highlighting @ mentions

 
Behind the scenes…

 
While it can be tricky and technical to craft certain regular expressions, sites such as regex101.com can make it a bit easier by providing helpful information and real-time feedback.

Happy Bubbling!

[BrianHenderson]

You are so cool. I’ve just gotta say it. You contribute so much on a regular basis to these forums and I’m very grateful.

[SumitC]

This is very helpful. Thanks Steve. @sudsy

[SumitC]

Is there an editor link for the CSS

[sudsy]

Wow, thanks so much for the feedback and kind words, @BrianHenderson. I sincerely appreciate it!

[sudsy]

@SumitC

This is very helpful. Thanks Steve.

Thanks, @SumitC. Glad you found it useful!

@SumitC

Is there an editor link for the CSS

With the recently imposed (but understandable) limitations on free plans, I’ve shifted to making my examples available through Buildshare (link in lower left of examples as well), which makes it easier for me to disseminate and maintain the content. (Other juicy examples there as well.)

For completeness, though, here are the simple CSS tweaks…

<style>
    #output span {
        padding: 2px 5px;
        border-radius: 100px;
    }
</style>

output is the id of the Bubble text element.

-Steve

[b.morris18]

This is fab, thank you so much!

Is there anyway to make it work with multiline inputs (or normal inputs)- I have given it a try but it doesn’t seem to work, though I could easily being doing it wrong.

[sudsy]

Thanks, @b.morris18.

@b.morris18

Is there anyway to make it work with multiline inputs (or normal inputs)

No, this technique is for display/output into a Text element only. If you’re wanting to allow users of your app to style text that they input, then perhaps Bubble’s Rich Text Editor (RTE) plugin might be worth a look. (It’s not a core element; it must be installed separately from the Plugins tab.)

[b.morris18]

Thanks Sudsy- I did indeed get this working with the Rich Text Editor

If you are using the Rich Text Editor a find and replace for simple keywords actually works without regex- I have it looking for the string I need and then replacing it with the same word formatted via the HTML tags. Alot less powerful, but worth knowing for those who don’t know regular expressions (like myself!)

[fernando2]

Thank you for this @sudsy! Doing mentions without a plugin is a dream.

Just to help out those who are trying to implement this, here is the regex to copy and paste:

(^|\s)(@[a-zA-Z0-9_]{3,})

And for those who want to add a dynamic link to the mention/hashtag here is the BBCode to place on the “Replace By” box. Also make sure not to forget checking the “User regex pattern” box.

$1[b][url=yourURLhere]$2[/url][/b]

For other BBCode styles (ie [b] and [/b] make your mentioned user bold) you can refer to this page. Also $2 is what returns the @mentioneduser.

Bonus 1: for those who also want to find and create links for hashtags as well, just add a second “find and replace” and change the regex to:

(^|\s)(#[a-zA-Z0-9_]{3,})

Bonus 2: to make sure your links open on the same tab (instead of bubble’s default of new one) use instead:

$1[b][url=yourURLhere target="_self"]$2[/url][/b] and un-check the “Recognize links and emails” box

[jmbarquet]

Hey @sudsy !!

Awesome help btw, could you by any chance show how the “Enhance with CSS” checkbox is working?

Thanks a lot!

[sudsy]

@jmbarquet

could you by any chance show how the “Enhance with CSS” checkbox is working?

Hi @jmbarquet,

As I recall, it’s just a HTML element with its contents set to the relevant CSS conditionally.

[douglas.epr]

@fernando2

$1[b][url=yourURLhere]$2[/url][/b]

Hi @fernando2 ,
Do you know the REGEX when I type something in an input and that keyword is highlighted in a repeating group as shown in the image below?

[douglas.epr]

Hi @sudsy ,

Do you know the REGEX for the situation shown in the image below?
I type a keyword in an input and it is shown in a repeating group.

[plumbus]

Finally I found the solution! Thank u