<pre class="shiki github-dark shaku"><code>type EntityBase = { indices: [number, number]}type UrlEntity = EntityBase &amp; { displayUrl: string, url: string,}type MentionEntity = EntityBase &amp; { screeName: string}type Entities = { urls: Array&lt;UrlEntity&gt;, mentions: Array&lt;MentionEntity&gt;}function renderTextWithEntities(text: string, entities: Entities): string { let htmlResul = text const baseurl = "https://x.com" const sortedMergedEntities = [...entities.urls, ...entities.mentions].sort((a,b)=&gt;b.indices[0]-a.indices[0]) for (const value of sortedMergedEntities) { const [start, end] = value.indices let replacement = text.slice(start, end) if("displayUrl" in value){ replacement = `&lt;a href="${value.url}"&gt;${value.displayUrl}&lt;/a&gt;` } else if("screeName" in value){ replacement = `&lt;a href="${baseurl}/${value?.screeName}"&gt;@${value.screeName}&lt;/a&gt;` } htmlResul = htmlResul.slice(0, start) + replacement + htmlResul.slice(end) } return htmlResul}const 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 ] } ] }console.log(renderTextWithEntities("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))</code></pre>

Time complexity is O(n)

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/Upkm…