Replace string in text area with the value of ajax response

Question

I have an ajax function that returns a shorturl of an url from a textarea. When I want to replace the shorturl by the actual url in the text area by using replace, the code not work. this is my implementation

Ajax function:

function checkUrl(text) {
  var bit_url = "";
  var url = text;
  var username = "o_1i42ajamkg"; // bit.ly username
  var key = "R_359b9c5990a7488ba5e2b0ed541db820";
  return $.ajax({
    url: "http://api.bit.ly/v3/shorten",
    data: {
      longUrl: url,
      apiKey: key,
      login: username
    },
    dataType: "jsonp",
    async: false,

    success: function(v) {
      bit_url = v.data.url;
    }
  });
}

and a function that call the checkurl function is implemented as follow

$("#urlr").change(function() {
  var text = $("#Pushtype_message").val();
  var c = "";
  var msgtext = "";
  var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;

  var MsgStr = $("#Pushtype_message").val();
  var Arr = text.split(" ");
  urllist = new Array();
  urluri = new Array();
  i = 0;
  for (var n = 0; n < Arr.length; n++) {
    txtStr = Arr[n];
    var urltest = urlRegex.test(txtStr);
    if (urltest) {
      urllist[i] = txtStr;
    }
  }

  for (var i = 0; i < urllist.length; i++) {
    // console.log(urllist[i].toString());
    checkUrl(urllist[i]).done(function(result) {
      var response = (result.data.url);

      console.log(response);
      MsgStr.replace(urllist[i], response);
      console.log(MsgStr);
      $("#Pushtype_message").val(MsgStr);
    });
  }
});

In my text area I put this text:

test utl function https://www.google.Fr  test success

and I get in my console the following result

main.js http://bit.****
main.js test utl function https://www.google.Fr  test success

As you see, the function return an urlshortner but the initial text still the same. My expected result is: test utl function http://bit.l**** test success, but this don't work.

Answer 1

I found the solution about my problem, I affect urllist[j] to a new variable text, because in the checklist function urllist[j] return an undefined value.

 var j=0;
        for(j; j<urllist.length; j++){
     var text=urllist[j];
        checkUrl(urllist[j]).done(function(result){
            var response=result.data.url;

            console.log(urllist[j]);

            MsgStr1 = MsgStr.replace(text,response);

            console.log(MsgStr1);
            $("#Pushtype_message").val(MsgStr1);
        });

    }

});

Answer 2

When working with textarea you can simply replace their text.

$("#Pushtype_message").text(MsgStr);

Answer 3

You need the assign the new value to MsgStr

for(var i=0; i<urllist.length; i++){
       // console.log(urllist[i].toString());
        checkUrl(urllist[i]).done(function(result){
            var response=(result.data.url);

            console.log(response);
            MsgStr = MsgStr.replace(urllist[i],response);
            console.log(MsgStr);
            $("#Pushtype_message").val(MsgStr);
        });

}

i is defined outside your for loop and used inside it urllist[i]=txtStr; but its value is never assigned, it's alaways = 0:

i=0;
for (var n = 0; n < Arr.length; n++) {
    txtStr = Arr[n];
    var urltest=urlRegex.test(txtStr);
    if(urltest)
    {
       urllist[i]=txtStr;
    }
}