CODEWITHSUNDEEP
javascriptregexreplace
CaribouCode
CaribouCode

Reputation: 14418

Find and replace specific strings

I have a string (a tweet) like so:

var str = "blah blah blah blah http://example.com blah blah #something blah blah https://example.com blah blah @person"

I want to pick out everything that should be a link and wrap it with link tags. The following 4 things need to be found in the string:

So I'd image it would be a bit like this:

str.replace(regexForHashtag, '<a href="' + linkText + '">" + linkText + "</a>");

Upvotes: 0

Views: 83

Answers (4)

ShapCyber
ShapCyber

Reputation: 3662

@tom your solution will only parse one String at a time. But twitter parse all at the same as you type.

@Coop want

  1. Any word beginning with @
  2. Any word beginning with #
  3. Any word beginning with http://
  4. Any word beginning with https://

Here is my approach after playing with this toy here More explanation can be found here

<div id="element">new text will drop here</div>


<script type="text/javascript">

$(document).ready(function(){
    function convertTextToUrl(refinedText) {
        var refinedText, refinePattern1, refinePattern2, refinePattern3, refinePattern4;
        //URLs starting with http://, https://, or ftp://
        refinePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
        refinedText = refinedText.replace(refinePattern1, function(UrlTo) {     
            return UrlTo.link(UrlTo);
        });
         //URLs starting with www 
        refinePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
        refinedText = refinedText.replace(refinePattern2, function(UrlTo) {     
            return UrlTo.link(UrlTo);
        });
        //mention with @
        refinePattern3 = /[@]+[A-Za-z0-9-_]+/gim;
        refinedText = refinedText.replace(refinePattern3, function(u) {
            var username = u.replace("@","")
            return u.link("http://twitter.com/"+username);
        });
        //# hastag 
        refinePattern4 = /[#]+[A-Za-z0-9-_]+/gim;
        refinedText = refinedText.replace(refinePattern4, function(t) {
            return t.link("https://twitter.com/"+t);
        }); 

        return refinedText;
    }   //USAGE
var TextToUrl= "Tubentertain is a web base #application, kind of a #device such as a #television or #multimedia player that has access to contents residing at remote sites.contact @tubentertain or visit http://tubentertain.com";

    var newText=convertTextToUrl(TextToUrl);
    $("#element").html(newText);
    //========================
});

This function can be useful for many other things such as converting all similar text on page to urls that link to other content.

Upvotes: 0

willeM_ Van Onsem
willeM_ Van Onsem

Reputation: 477210

You can simply using a capture group:

a = "blah blah blah blah http://example.com blah blah #something blah blah https://example.com blah blah @person";
a = a.replace(/(^|\s)(((https?:\/\/)|[@#])\S*)/g,'<a href="$2">$2</a>');
alert(a);

This results in:

blah blah blah blah<a href="http://example.com">http://example.com</a> blah blah<a href="#something">#something</a> blah blah<a href="https://example.com">https://example.com</a> blah blah<a href="@person">@person</a>

JFiddle demo.

EDIT: since usernames and hashtakes should not be copied in the href, you can do it using three stage find-and-replace:

a = "blah blah blah blah http://example.com blah blah #something blah blah https://example.com blah blah @person";
a = a.replace(/(^|\s)(https?:\/\/\S*)/g,'<a href="$2">$2</a>');
a = a.replace(/(^|\s)[@](\S*)/g,'<a href="http://twitter.com/$2">$2</a>');
a = a.replace(/(^|\s)[#](\S*)/g,'<a href="https://twitter.com/search?q=%23$2">$2</a>');
alert(a);

This results in:

blah blah blah blah<a href="http://example.com">http://example.com</a> blah blah<a href="https://twitter.com/search?q=%23something">something</a> blah blah<a href="https://example.com">https://example.com</a> blah blah<a href="http://twitter.com/person">person</a>

Upvotes: 0

Tom
Tom

Reputation: 7740

Based on Parsing Twitter Usernames, Hashtags and URLs with JavaScript:

String.prototype.parseURL = function() {
    return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(url) {
        return url.link(url);
    });
};

String.prototype.parseUsername = function() {
    return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
        var username = u.replace("@","");
        return u.link("http://twitter.com/"+username);
    });
};

String.prototype.parseHashtag = function() {
    return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
        var tag = t.replace("#","%23");
        return t.link("http://search.twitter.com/search?q="+tag);
    });
};

String.prototype.parseTweet = function() {
  return this.parseURL().parseUsername().parseHashtag();
};

Which can be called like:

var str = "blah blah blah blah http://example.com blah blah #something blah blah https://example.com blah blah @person"

str.parseTweet();
// or:
// str.parseURL
// str.parseUsername
// str.parseHashtag

See this jsBin

Upvotes: 1

Toto
Toto

Reputation: 91488

I'd use the following regex:

/(?:^|\s)((?:@|#|https?:\/\/)\S+)/

The word you need is in group 1.

Upvotes: 0

Related Questions