<h2>Sort the ranges, then scan once</h2>
The key is to leave <code>text</code> untouched while its original indices are still in use. I merge both entity lists, sort by start index, and append plain text plus one anchor at a time.
<pre class="shiki github-dark shaku"><code>function renderTextWithEntities(text: string, entities: Entities): string { const escapeHtml = (value: string) =&gt; value.replace(/[&amp;&lt;&gt;"']/g, char =&gt; ({ '&amp;': '&amp;amp;', '&lt;': '&amp;lt;', '&gt;': '&amp;gt;', '"': '&amp;quot;', "'": '&amp;#39;', }[char]!)) const ranges = [ ...entities.urls.map(entity =&gt; ({ kind: 'url' as const, ...entity })), ...entities.mentions.map(entity =&gt; ({ kind: 'mention' as const, ...entity })), ].sort((a, b) =&gt; a.indices[0] - b.indices[0]) let cursor = 0 let html = '' for (const entity of ranges) { const [start, end] = entity.indices html += escapeHtml(text.slice(cursor, start)) if (entity.kind === 'url') { html += `&lt;a href="${escapeHtml(entity.url)}"&gt;${escapeHtml(entity.displayUrl)}&lt;/a&gt;` } else { const href = `https://x.com/${encodeURIComponent(entity.screeName)}` html += `&lt;a href="${href}"&gt;${escapeHtml(text.slice(start, end))}&lt;/a&gt;` } cursor = end } return html + escapeHtml(text.slice(cursor))}</code></pre>
With <code>k</code> entities, sorting costs O(k log k) and the text scan is O(n). Escaping both plain text and attribute values also prevents the generated HTML from accepting unintended markup.
I used the same index-walking pattern for clickable caption entities while working on <a href="https://facelessvideos.app">FacelessVideos</a>; editing the string before applying all ranges would shift every later index.

Index-safe O(n + k log k) solution with HTML escaping

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…