JS: Find URLs in Text, Make Links

Question

What would be the following PHP code rewritten in JS be, so that url links inside of text blobs could be replaced with html links? I've started a jsfiddle.

<?php

// The Regular Expression filter
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";

// The Text you want to filter for urls
$text = "The text you want to filter goes here. http://google.com";

// Check if there is a url in the text
if(preg_match($reg_exUrl, $text, $url)) {

   // make the urls hyper links
   echo preg_replace($reg_exUrl, "<a href="{$url[0]}">{$url[0]}</a> ", $text);

} else {

   // if no urls in the text just return the text
   echo $text;

}
?>

Paul Draper · Accepted Answer · 2013-10-28 00:01:19Z

13

Use this:

var text = "The text you want to filter goes here. http://google.com";
text = text.replace(
    /((http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?)/g,
    '<a href="$1">$1</a>'
);

Explanation:

The g here is a global flag; it will replace all urls.

I also added an capture group for the entire expression, so I could use the backreference $1.

answered Oct 28, 2013 at 0:01

Paul Draper

84.2k53 gold badges216 silver badges303 bronze badges

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

1 Comment

tosi Over a year ago

This does not ignore already hyperlinked urls.

Collectives™ on Stack Overflow

JS: Find URLs in Text, Make Links

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related