<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 textt = text; const all = [ ...entities.urls.map(e =&gt; ({ ...e, type: 'url' as const })), ...entities.mentions.map(e =&gt; ({ ...e, type: 'mention' as const })), ]; // sort by start index, DESCENDING — replace from the end backwards all.sort((a, b) =&gt; b.indices[0] - a.indices[0]); all.forEach(entity =&gt; { const htmlString = entity.type === 'url' ? `&lt;a href="${entity.url}"&gt;${entity.displayUrl}&lt;/a&gt;` : `&lt;a href="https://x.com/${entity.screeName}"&gt;@${entity.screeName}&lt;/a&gt;`; textt = textt.slice(0, entity.indices[0]) + htmlString + textt.slice(entity.indices[1]); }); return textt;}</code></pre>

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…