CODEWITHSUNDEEP
javascriptjqueryhtmlregex
Perl Fanatic
Perl Fanatic

Reputation: 109

Trying to replace link with hyperlink in textarea using javascript gives array error

Whenever user type in textarea and post some link in it, I immediately want to change it to link like stackoverflow.com does here whenever anyone types https://stackoverflow.com/?q=and+message+continues+till+end but whenever anyone will pass any non-link text it will come back to text look...

here is my try, what i have done, before i post it below , let me tell you i am not javascript student, i am just trying to cut paste and use my other programming logic and trying to make it happen. So, whenever you reply, consider my no-solid-javascript background.

Thanks

My Try below :-

function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
        return regexp.test(s);
    }

$('#status').keyup(function() {
    var value = $("#status").val();
    var words = value.split(" ");
    for (var i=0;i<words.length;i++)
    {
        var n = isUrl(words[i]);
        if (n)  {
            var deadLink = '<a href="'+words[i]+'" target="_blank" rel="nofollow">'+words[i]+'</a>';
            words[i].replace(words[i], deadLink);
        }
    }
});

and this is not working, I am not getting any error here, but when i use it without array indexing like below I am getting array error:-

for (var i=0;i<words.length;i++)
{
    var n = isUrl(words);
    if (n)  {
    var deadLink = '<a href="http://google.com/search?q='+words+'" target="_blank" rel="nofollow">'+words+'</a>';
    words.replace(words, deadLink);
    }
}

Any way to fix it ?

Thanks

Upvotes: 0

Views: 1762

Answers (1)

acdcjunior
acdcjunior

Reputation: 135812

Main problems:

  • Your replace() calls had no effect as you weren't assigning them to anything.
  • You didn't use the resulting words array - you just processed it and... nothing.

Some changes I made:

  • Added one line to escape the typed text:

    var value = $('<div/>').text(nonEscapedValue).html();

  • Changed replace()'s line to assign replace()'s result:

    words[i] = words[i].replace(words[i], deadLink);

  • Finally added a line to put the processed array in to a div:

    $("#myResultDiv").html(words.join(" "));

Final code (check jsfiddle demo here):

function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
    return regexp.test(s);
}
$('#status').keyup(function() {
    var nonEscapedValue = $("#status").val();
    // added line below to escape typed text
    var value = $('<div/>').text(nonEscapedValue).html();
    var words = value.split(" ");
    for (var i=0;i<words.length;i++)
    {
        var n = isUrl(words[i]);
        if (n)  {
            var deadLink = '<a href="'+words[i]+'" target="_blank" rel="nofollow">'+words[i]+'</a>';
            // changed line below to assign replace()'s result
            words[i] = words[i].replace(words[i], deadLink);
        }
    }
    // added line below to put the result in to the div #myResultDiv
    $("#myResultDiv").html(words.join(" "));
});

Hopefully this will help you towards your goal.

Upvotes: 2

Related Questions