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 Expressions

We use regular expressions 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.

Matching Limitation Using That Pattern

For instance, the text is as such:

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

⬆️ The regex will match http://localhost:4098- ⬅️ with that drunk dash glued to it. Because indeed, a hyphen or dash is a part of valid URL pattern — as a part of the domain name or path. We can serve it dangling at the end like https://example.com/path- from the server. 🤷‍♂️ Hence we shouldn't just ignore that possibility. We can, though.

Or

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

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

Or

Sometimes, we do https://example.com/plot-twist: the plot is twisted.

⬆️ It will match https://example.com/plot-twist:. Though it looks weird, dangling colon and/or semicolon is valid. It can be served from the backend. Perhaps the developer is trying to assert punctuation dominance, we can only guess.

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

This pattern:

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

can surely be modified so that it looks like Babylonian's logophonetic script centipede. By combining known TLDs, slash pattern, even more exquisiteness, then implode. TLD = Top-Level Domain.

We can test our regex patterns using Jarextor on Port Raptor.

---

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

That regex pattern

Diego 🕺

---

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

HTML OUTPUT

RENDERED OUTPUT

The default regex is that. We can pick Diego-style to compare the output. 🕺

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

---

CSS: Resizing and Colouring Radio Input and Checkbox

These elements:

We can do this:

.checkboxOrRadiobox { /* Adjust as needed */ /* Dimensions and vertical alignment */ width: 30px; height: 30px; vertical-align: middle; /* Colourise */ accent-color: green; /* ⬆️ First launched in late summer/early autumn of 2021. */ }

The radio-input and checkbox size and colour customisations work across most browsers.

But for radio input, the custom dimensions may cause issues with certain browsers, like Safari, especially with smaller sizes.

One of the issues would be like... blank. Hm. User is required to imagine its existence.

---

---

Diego 🕺

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 to the hippie

The hip, hip-a-hop and you don't stop rockin'

To the bang, bang the boogie, say up jump the boogie

To the rhythm of the boogie, the beat

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

For comparison:

Rapper's Delight. 🎤 (I said a)

Diego's Version. 🕺 (Aserejé)

So Las Ketchup's story in that song is:

A Spanish lad named Diego walks into a club, knows the DJ, DJ sees him, DJ plays his "anthem" - "Rapper's Delight". Diego doesn't speak English, but starts vibing and mumbling the lyrics in his own bonkers way. And with that, "Aserejé" commences.

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.

With this enlightenment, you'll find that the verses should also fit the humour. I mean, "Rastafari afrogitano" is quite exquisite.

Rastafari Afrogitano

---

A • S • E • R • E • J • É

⬆️ T-shirt?

Or use the regex:

A • S • E • R • E • J • É

---

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

🕺

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

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

(One hand flies to the forehead, the other goes the back of the head, knees go full jelly mode.)

A toast for Diego! 🍺