improve links parsing

backend/src/mastodon/microformats.ts

@@ -9,7 +9,7 @@ function tag(name: string, content: string, attrs: Record<string, string> = {}):
 	return `<${name}${htmlAttrs}>${content}</${name}>`
 }
 
-const linkRegex = /(^|\s|\b)(https?:\/\/[^.\s]+\.[^.\s]+(?:\/[^.\s/]+)*)(\b|\s|$)/g
+const linkRegex = /(^|\s|\b)(https?:\/\/[-\w@:%._+~#=]{2,256}\.[a-z]{2,6}\b(?:[-\w@:%_+.~#?&/=]*))(\b|\s|$)/g
 const mentionedEmailRegex = /(^|\s|\b)@(\w+(?:[.-]?\w+)+@\w+(?:[.-]?\w+)+(?:\.\w{2,3})+)(\b|\s|$)/g
 
 /// Transform a text status into a HTML status; enriching it with links / mentions.
@@ -46,7 +46,7 @@ function getLinkAnchor(link: string) {
 	try {
 		const url = new URL(link)
 
-		return tag('a', url.hostname + url.pathname, { href: url.href })
+		return tag('a', url.hostname + url.pathname, { href: link })
 	} catch (err: unknown) {
 		console.warn('failed to parse link', err)
 		return link

backend/test/mastodon.spec.ts

@@ -331,15 +331,24 @@ describe('Mastodon APIs', () => {
 		})
 
 		test('convert links to HTML', () => {
-			assert.equal(
-				enrichStatus('hey https://cloudflare.com/abc hi'),
-				'<p>hey <a href="https://cloudflare.com/abc">cloudflare.com/abc</a> hi</p>'
-			)
-
-			assert.equal(
-				enrichStatus('hey https://cloudflare.com/abc'),
-				'<p>hey <a href="https://cloudflare.com/abc">cloudflare.com/abc</a></p>'
-			)
+			const linksToTest = [
+				'https://cloudflare.com/abc',
+				'https://cloudflare.com/abc/def',
+				'https://www.cloudflare.com/123',
+				'http://www.cloudflare.co.uk',
+				'http://www.cloudflare.co.uk?test=test@123',
+				'http://www.cloudflare.com/.com/?test=test@~123&a=b',
+				'https://developers.cloudflare.com/workers/runtime-apis/request/#background',
+			]
+			linksToTest.forEach((link) => {
+				const url = new URL(link)
+				const urlDisplayText = `${url.hostname}${url.pathname}`
+				assert.equal(enrichStatus(`hey ${link} hi`), `<p>hey <a href="${link}">${urlDisplayText}</a> hi</p>`)
+				assert.equal(enrichStatus(`${link} hi`), `<p><a href="${link}">${urlDisplayText}</a> hi</p>`)
+				assert.equal(enrichStatus(`hey ${link}`), `<p>hey <a href="${link}">${urlDisplayText}</a></p>`)
+				assert.equal(enrichStatus(`${link}`), `<p><a href="${link}">${urlDisplayText}</a></p>`)
+				assert.equal(enrichStatus(`@!@£${link}!!!`), `<p>@!@£<a href="${link}">${urlDisplayText}</a>!!!</p>`)
+			})
 		})
 	})
 })