<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;}const replaceStringBetween = ({str, start, end, replacement} : { str: string, start: number, end: number, replacement: string}) =&gt; { return str.slice(0, start) + replacement + str.slice(end);}function renderTextWithEntities(text: string, entities: Entities): string { const {urls, mentions} = entities; let newText = text; for(const urlEntity of urls){ const {displayUrl, url} = urlEntity; const start = newText.indexOf(url); const end = start + url.length; newText = replaceStringBetween({str: newText, start, end, replacement: `&lt;a href="${url}"&gt;${displayUrl}&lt;/a&gt;`}) } for(const mentionEntity of mentions){ const {screeName} = mentionEntity; const start = newText.indexOf(`@${screeName}`); const end = start + screeName.length + 1; newText = replaceStringBetween({str: newText, start, end, replacement: `&lt;a href="https://x.com/${screeName}"&gt;@${screeName}&lt;/a&gt;`}) } return newText;}const input = { 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 ] } ] }};renderTextWithEntities(input.text, input.entities as Entities);</code></pre>

Time complexity: O(n), Space complexity: 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…