Links in memo to be clickable

The links shared through memo, especially for the upvotes and resteems are clickable in Steemit.com but in busy.org they are shown as simple text. To open the posts, one has to copy-paste in new tab. It is easier in steemit.com, since the post is opened in new tab automatically when the link is clicked and we can also tab(navigate) through the links. Even the accessibility also take a hit due to this.

I'm using @resteemr as example since I found lot of links in the page. Many people have share links for resteem.

Refer the screenshot below, first one belongs to steemit.com and followed by screenshot from busy.org

Screenshot from steemit.com:

Screenshot from busy.org:

The memo links shown in 'transfers' page are clickable in steemit.com. Steemit.com identifies links from the normal text and it is wrapped inside 'anchor' tag. Such conversion is not available in busy.org. The links or simple texts are not distinguished seperately. Both the links and text are displayed as simple text, wrapped within 'span' tag.

Animated Illustration:

Possible solution:

In order to fix this, the possible solution would be to identify is any text starts with 'https' or 'http' then wrap the whole text (until a space is used) within an anchor tag. Rest of the other text can be wrapped within a 'span' tag.

To accomplish the above task, a simple technique could be using Regex. Use Regex to identify URL. I've written a sample JS function which can do it. This is just as an example.

Simple JavaScript to detect URL within text and replace the simple text with URL. Of course this just to give an idea and not production-ready code.

function linkify(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    });
}

// Usage
var element = document.querySelector('.UserWalletTransactions__memo');
var html = linkify(element.innerText);
element.innerHTML = html; 

---

Posted on Utopian.io - Rewarding Open Source Contributors

---