JavaScript: Capture URL Pattern (Aserejé Vibe)

Ello there.

For instance, we have this text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus orci sed placerat faucibus. Vestibulum tempor sapien sit amet consequat ornare. Then https://brutus-eats-sausage.io. Morbi convallis nunc et lorem sodales posuere — bit of a pickle that, https://lorem-legion.gold?page=prophecy&id=42#scrolls. Ut ut nisl leo. Duis quis ipsum nisi, cheers to https://senator-toga.club?offer=grapes&discount=10#villa. Donec sit amet ipsum pulvinar orci maximus cursus eu a mauris. Vivamus erat turpis, https://centurion-tips.biz#gladius, gravida at metus non, rutrum dictum orci. Curabitur sit amet blandit erat, https://colosseum-snack.bar?item=olives&combo=wine#snackbox, vestibulum tempus purus. Aenean volutpat non elit a congue — sponsored by https://pompey-pies.shop?flavour=beef&size=xl#oven.

And we want to capture all URL pattern from the text.

URL = Uniform Resource Locator (RFC 1738, December 1994)

URL is the address of a web page.

---

Regular Expression

We use regular expression to match the URL pattern.

The direct lookup pattern is as such:

/https?:\/\/[^\s]+/g

Details:

• https? ➡️ matches http or https
• :\/\/ ➡️ matches the literal ://
• [^\s]+ ➡️ matches any characters except whitespace (so it stops before a space, line break, or tab)
• /g ➡️ global flag to find all matches

⬆️ But that will go like Diego (as will be explained below this post).

H. O. L. A.

Let's go a bit sober.

/(https?:\/\/\S+?)(?=[)\]}>"'.,;]*(?:\s|$))/g

Details:

• https?:\/\/ ➡️ match the protocol.
• \S+? ➡️ lazily grab non-whitespace (keeps #, ?, !, etc.).
• (?=[)\]}>"'.,;]*(?:\s|$)) ➡️ a lookahead that checks for an optional closing punctuation mark (), ], }, >, ", ', ., ,, or ;), but only if it's followed by a space or the end of the string.

That could be further refined, but we'll stop at that for now.

Thus for instance, the text has URL pattern as so:

I type http://localhost:4098- after 4 a.m.

⬆️ The regex will match http://localhost:4098- ⬅️ with that drunk dash glued to it.

Or

I type http://localhost:4098.after 4 a.m.

⬆️ It will match http://localhost:4098.after.

Eh, close enough. This is called "let's blame the user".

---

We should wrap the regex as a function.

Matching Only

function detectURL(text) { return text?.match(/(https?:\/\/\S+?)(?=[)\]}>"'.,;]*(?:\s|$))/g); } /** * Usage: * text = "http://cravatum-davyus-maxim.us; grand Victorian prix."; * detectURL(text); * * Output: ["http://cravatum-davyus-maxim.us"] ⬅️ Array. * It will return null if there's no match found. */

Replace

function replaceURLWithLink(text) { return text?.replace(/(https?:\/\/\S+?)(?=[)\]}>"'.,;]*(?:\s|$))/g, function (foundPattern) { // Replace the found string with an [a] tag with the "href" is the "foundPattern". return `<a href="${foundPattern}">${foundPattern}</a>`; }); } /** * Usage: * text = "http://cravatum-davyus-maxim.us; grand Victorian prix."; * replaceURLWithLink(text); * * Output: '<a href="http://cravatum-davyus-maxim.us;">http://cravatum-davyus-maxim.us;</a> grand Victorian prix.' ⬅️ String. * It will return the original input if there's nothing to replace. */

---

Demonstration

Sample text to test:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus orci sed placerat faucibus. Vestibulum tempor sapien sit amet consequat ornare. Then https://brutus-eats-sausage.io. Morbi convallis nunc et lorem sodales posuere — bit of a pickle that, https://lorem-legion.gold?page=prophecy&id=42#scrolls. Ut ut nisl leo. Duis quis ipsum nisi, cheers to https://senator-toga.club?offer=grapes&discount=10#villa. Donec sit amet ipsum pulvinar orci maximus cursus eu a mauris. Vivamus erat turpis, https://centurion-tips.biz#gladius, gravida at metus non, rutrum dictum orci. Curabitur sit amet blandit erat, https://colosseum-snack.bar?item=olives&combo=wine#snackbox, vestibulum tempus purus. Aenean volutpat non elit a congue — sponsored by https://pompey-pies.shop?flavour=beef&size=xl#oven.

INPUT

target="_blank" rel="noopener" rel="noreferrer"

HTML OUTPUT

RENDERED OUTPUT

The target="_blank", rel="noopener", and rel="noreferrer" settings are to optionally add any of those attributes into the anchor tag.

---

Cheerio

Aserejé - Las Ketchup

Right. The chorus:

Aserejé ja de je de jebe tu de jebere seibiunouva majabi an de bugui an de buididipí

💀

That's not Spanish. That's not even Uranusian.

It's a phonetic butchering of:

I said a hip, hop, the hippie, the hippie

to the hip hip hop, and you don't stop…

⬆️ From Sugarhill Gang's "Rapper's Delight".

So Las Ketchup's story in that song is:

A Spanish lad named Diego walks into a club, hears "Rapper's Delight", doesn't speak English, but starts vibing and mumbling the lyrics in his own bonkers way.

The song is basically about that, that Diego lad. Getting down in the club, possessed by the groove, mis-singing American hip-hop while dancing like a proper possessed plonker.

Feel the boogie! 🕺💃🫏🐐 Bugui an de buididipí. ¡Olé!

...de jebere seibiunouva majabi an de bugui an de buididipí

A toast for Diego! 🍺