JavaScript Regex to Replace Links
I was working on a small project the other day; the goal was to pull my bookmarked tweets onto my blog so that I could share them in my blog. Here is the data I received from Twitter.
Exciting news 🎉 \n\nDocument Question Answering is now a first class citizen in @huggingface transformers! With just 3 lines of code, you can process any document like so: https://t.co/74DfkMG5FBI want to format it so that it is like this; the link can be clickable and I can give it some style, such as color hover, etc.
Exciting news 🎉 Document Question Answering is now a first class citizen in @huggingface transformers! With just 3 lines of code, you can process any document like so: <a href="https://t.co/74DfkMG5FB">https://t.co/74DfkMG5FB</a>
Regex
The easiest way to do this is to use regex. Ok here's how you can do that.
var str = `Exciting news 🎉 \n\nDocument Question Answering is now a first class citizen in @huggingface transformers! With just 3 lines of code, you can process any document like so: https://t.co/74DfkMG5FB`
let formatted = str.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1">$1</a>');
So, in this case, we are looking for a string starting with https:// which is handled by this regex: https?:\/\/ and then we get the rest of the text until the space character comes [^\s]+.
The replace() method searches the original string for a regular expression (regex) pattern, and replaces any matches with a specified replacement string. In this case, the regex pattern is /(https?:\/\/[^\s]+)/g, which looks for any string that starts with http, followed by an optional s, followed by ://, followed by one or more characters that are not whitespace characters ([^\s]), and ending with one or more of any character (.+).
The g flag at the end of the regex indicates that the search should be global, meaning it should find all occurrences of the pattern in the string, rather than stopping at the first match, if you want to only match one string you can removed it.
The replacement string is <a href="$1">$1</a>, which includes the special character $1. This refers to the first captured group in the regex pattern, which in this case is the URL that was matched. The replacement string creates an HTML anchor tag that links to the URL, using the URL as the text of the link.
