Question

I cannot understand why my code is not working when I am about to replace three exact same words. Lets say if an input is “www.facebook.com http://www.facebook.com wwww.facebook.com”

my output would be this which is not what I want

<div class="content" style="font-size:13px;">
<a href="www.facebook.com">www.facebook.com</a>
<a href="&lt;a href=" www.facebook.com'=""> www.facebook.com</a>'&gt; www.facebook.com www.facebook.com
</div>

but if I input lets say “www.facebook.com http://www.google.com wwww.yahoo.com” I get what I want

<div class="content" style="font-size:13px;">
<a href="www.facebook.com">www.facebook.com</a>
<a href=" www.google.com"> www.google.com</a> 
<a href="wwww.yahoo.com">wwww.yahoo.com</a>
</div>

What I am actually trying to do is when a user inputs a link in a text area and submits it. The code will replace the match link with an anchor tag.

This is my .js

var wordlink2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
var hyperlink2;

hyperlink2 = content.match(wordlink2);

var $item = $("#ClassroomCommentComment").val();


if (hyperlink2 != null) {
    for (x = 0; x < hyperlink2.length; x++) {
        var site2 = hyperlink2[x].toString();
        var z2 = $item.replace(hyperlink2[x], "<a href='" + site2 + "'>" + site2 + "</a>");
        $item = z2;
    }
}​

I am already blown away with this. Can anyone help me with this 🙁

just an additional this is my function to be more precise:

function checkSubmit()
    {
        var $item = $("#ClassroomCommentComment").val();
        var $cont = $("#FileFile").val();


        if($item == "")
        {
            return false;
        }
        else
        {
            //$("#ClassroomCommentComment").css('color', 'white');

            if (hyperlink != null)
            {
                for (x= 0; x<hyperlink.length; x++)
                {

                    var site = hyperlink[x].toString();
                    var z = $item.replace(hyperlink[x],"<a href='" + site + "'>" + site +"</a>" );
                    $item = z;
                }       
            }

            if (hyperlink2 != null)
            {               
                for (x= 0; x<hyperlink2.length; x++)
                {
                    var site2 = hyperlink2[x].toString();
                    var z2 = $item.replace(hyperlink2[x],"<a href='" + site2 + "'>" + site2 +"</a>" );
                    $item = z2;

                }       
            }



            for (x=0; x<=arraycontroller; x++)
            {
                var n = $item.replace(fullnamewp[x],"<a href = 'http://www.classoncloud.org/" + userlink[x] + "'>" + fullnamewp[x] +"</a>" );
                $item = n;
                //$("#ClassroomCommentComment").val(n);
            }

            if (hash != null)   
            {
                for (x= 0; x<hash.length; x++)
                {
                    var new_item = hash[x].toString().substr(1).split("#");
                    var b = $item.replace(hash[x],"<a href='http://www.classoncloud.org/results/" + new_item + "'>" + hash[x] +"</a>" );
                    $item = b;
                }   
            }

            arraycontroller = 0;
            fullnamewp = [];
            userlink = [];


            var classroom_id = $("#ClassroomCommentClassroomId").val();
            var user_id = $("#ClassroomCommentUserId").val();
            var comment = $item;
            var image = "<?php echo $profile_pic; ?>";
            var name = "<?php echo $current_user_name; ?>";




        $.ajax({
        type: "POST",   
        url: '/learns/classroom/',
        data: "data[ClassroomComment][classroom_id]=" + classroom_id + "&data[ClassroomComment][user_id]=" + user_id + "&data[ClassroomComment][comment]=" + comment,
        dataType: "html",
        success: function(data){



        var parent_id = data;



        $('#comment-list').prepend('<div class="comments">  <a href="'+user_id+'"  class="image"><img src="'+image+'" width="50" height="50">   </a><a href="#" class="wall_delete" id='+parent_id+' style="display: none;"></a>    <div class="name">  <a href="'+user_id+'" class="close">X</a><a href="#" style="font-size:13px;">'+name+'</a><div class="content" style="font-size:13px;">'+comment+'</div> <div class="time"><div class="star-count"></div><a class="my-star" href="#" id='+parent_id+'>myStar .</a><a class="click" href="#">Comment</a> 1 seconds&nbsp;ago </div></div>       <form id="LearnsClassroomForm" accept-charset="utf-8" method="post" action="/learns/classComment"><input type="hidden" name="data[ClassroomComment][parent_id]" action="classroom" value='+parent_id+' id="ClassroomCommentParentId"><input type="hidden" name="data[ClassroomComment][classroom_id]" action="classroom" value="'+classroom_id+'"id="ClassroomCommentClassroomId"><input type="hidden" name="data[ClassroomComment][user_id]" action="classroom" value="'+user_id+'" id="ClassroomCommentUserId"><div class="displaycomment"><textarea name="data[ClassroomComment][comment]" class="textarea" placeholder="Write comment here..." id="ClassroomCommentComment" style="overflow: hidden; word-wrap: break-word; resize: none; height: 18px;"></textarea> <input type="submit" value="Comment" class="submit" style=" margin-right:7px; margin-top:10px;"> </div> </form></div>');

            }
        }); 


        $("#ClassroomCommentComment").val("");
        $("#ClassroomCommentComment").css('color', 'black');

        $($(this).parent().parent().find("textarea")).css("height","30px");     
        return false;   

        }   

    }

Answer 1

I think you’re making this more complicated than you need to. The .replace() method accepts a regex to specify what should be replaced, and if you set the g flag on the regex it does a global replace. So you can make the appropriate change to all hyperlinks with a single call to replace as follows:

var $item = $("#ClassroomCommentComment").val();
$item = $item.replace(/((^|[^\/])(www\.[\S]+(\b|$)))/gi, '<a href="$1">$1</a>');
// do something with $item

Demo: http://jsfiddle.net/7vcZd/1/

There’s no need to first use the .match() method in order to use the result of that match as the first argument for .replace().

The reason your code was producing the weird output is that you were passing a string as the first parameter to .replace() – when you do that it doesn’t do a global replacement, it just replaces the first instance. Because you did the same replacement in a loop, the second and subsequent replacements were within the <a ... part that you added in the first replacement. If you add a console.log($item) statement to the end of the loop you’ll see what’s happening with each iteration…