<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 result = text; // Sort the entities in reverse order for processing, so that earlier indices remain accurate [...entities.mentions, ...entities.urls].sort((a, b) =&gt; b.indices[0] - a.indices[0]).forEach(entity =&gt; { let entityName = null; let entityUrl = null; if ("screeName" in entity) { // Could be more verbose in validating this is a MentionEntity entityName = `@${entity.screeName}`; entityUrl = `https://x.com/${entity.screeName}`; } else if ("displayUrl" in entity) { // Could be more verbose in validating this is a UrlEntity entityName = entity.displayUrl; entityUrl = entity.url; } // Use the indices to slice the string and inject the HTML result = `${result.slice(0, entity.indices[0])}&lt;a href="${entityUrl}"&gt;${entityName}&lt;/a&gt;${result.slice(entity.indices[1], result.length)}`; }); return result;}</code></pre>

Single reverse loop

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…