On Twitter(now X), we always see mentions, hashtags and links in blue links, like this one below.

Shaku syntax is now supported on https://t.co/UpkmJ7yGKG! Give it a try to annotate your code ! kudos to @JSer_ZANP for making such a great tool ! pic.twitter.com/i0SQwpk9Qd
— BFE.dev (@BFEdev) July 16, 2024

One flexible way to implement this is to store the format info separately besides the user input in plain text, and connect them through the indices.

In above example, we can use following data structure.

{    text: 'Shaku syntax is now supported on https://t.co/UpkmJ7yGKG! Give it a try to annotate your code ! kudos to @JSer_ZANP for making such a great tool !',    entities: {        "urls": [            {                "displayUrl": "BFE.dev", // url to display                "url": "https://t.co/UpkmJ7yGKG", // actual url to redirect                "indices": [                     33, // start index, inclusive                    56 // end index, exclusive                ]            }        ],        "mentions": [            {                "screeName": "JSer_ZANP", // display screen name                "indices": [                     105, // start index, inclusive                    115 // end index, exclusive                ]            }        ]    }}

You are now required to create a function to render above data structure into html string. The fields should explain by itself.

There is no emoji in the text. You don't need to worry about the index offset.
For mention, you should redirect to https://x.com/{screeName}
There are no overlaps within the entities.

讨论 (49)