Javascript Regex for Removing http:// and https:// from text

Question

I found this JS script here on SO that seems like it will work great for detecting both regular links and Twitter #hashtags and @usernames:

function processTweetLinks(text) {
    text = text.replace();
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
    text = text.replace(exp, "<a href='$1' target='_blank'>$1</a>");
    exp = /(^|\s)#(\w+)/g;
    text = text.replace(exp, "$1<a href='http://search.twitter.com/search?q=%23$2' target='_blank'>#$2</a>");
    exp = /(^|\s)@(\w+)/g;
    text = text.replace(exp, "$1<a href='http://www.twitter.com/$2' target='_blank'>@$2</a>");
    console.log(text);
}

BUT... The first expression doesn't quite suit my needs... When it gets something like http://google.com, it outputs <a href='http://google.com' target='_blank'>http://google.com</a>. I want it to output <a href='http://google.com' target='_blank'>google.com</a> instead - basically removing http:// or https:// from inside the anchor tags. I don't know regex - what would the function need to look like in order to output that?

UPDATE: I got the function fixed with @BrunoFinelli's answer, which works great, but I don't know how to make it fix multiple links in a given string/message. Right now it only fixes one each time I call the function... If anyone can adjust the function to fix this that'd be much appreciated! Thanks! It'd also be nice if the first regex (the one in question) removed www.'s as well from inside the anchor tags? But really I just need to know how to repeat this through a Tweet that may have more than one link/mention/hashtag. Thanks!

Bruno Finelli · Accepted Answer · 2013-04-16 21:06:25Z

3

Try this one:

    function processTweetLinks(text) {
        text = text.replace();
        var exp = /(\b(https?|ftp|file):\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
        text = text.replace(exp, "<a href='$1$3' target='_blank'>$3</a>");
        exp = /(^|\s)#(\w+)/g;
        text = text.replace(exp, "$1<a href='http://search.twitter.com/search?q=%23$2' target='_blank'>#$2</a>");
        exp = /(^|\s)@(\w+)/g;
        text = text.replace(exp, "$1<a href='http://www.twitter.com/$2' target='_blank'>@$2</a>");
        console.log(text);
    }

answered Apr 16, 2013 at 21:06

Bruno Finelli

462 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bruno Finelli Over a year ago

Just tried and it worked correctly... processTweetLinks('http://google.com') yields <a href='http://google.com' target='_blank'>google.com</a>

tylerl Over a year ago

Yeah, it's perfect! Nothing wrong with it as far as my novice eyes can see! Thank you @BrunoFinelli! The only minor oversight I had was www.'s, it'd be nice to remove those as well?

tylerl Over a year ago

I didn't realize it was only being applied to one link each time it ran... Could you modify your answer so that it can fix more than one link in a given string? Thank you!

tylerl Over a year ago

Nevermind, I figured it out: add a "g" to the end of the regex to enable global matching, which basically means "keep looking". Change the i at the end of line 3 to ig and it works.

corvec · Accepted Answer · 2013-04-16 21:10:10Z

0

You need to catch the second part of the URL in another capturing group and reference that group inside the anchor tags.

var exp = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/i;
text = text.replace(exp, "<a href='$1' target='_blank'>$3</a>");

You can figure out how to refer to the group by counting when the left parenthesis occurs in the statement. In the above case, you want href to equal the entirety of the statement (the first left parenthesis) and you want the inner html to match the third left parenthesis.

This would also work, as $& inserts the entirety of the matched string:

var exp = /\b(https?|ftp|file):\/\/([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
text = text.replace(exp, "<a href='$&' target='_blank'>$2</a>");

edited Apr 16, 2013 at 21:10

answered Apr 16, 2013 at 21:02

corvec

2884 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript Regex for Removing http:// and https:// from text

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related