Заменить строку в текстовой области значением ответа ajax

Question

У меня есть функция ajax, которая возвращает короткий URL-адрес из текстовой области. Когда я хочу заменить shorturl реальным URL-адресом в текстовой области с помощью команды replace, код не работает. это моя реализация

Функция Ajax:

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;
    }
  });
}

и функция, которая вызывает функцию checkurl, реализована следующим образом

$("#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);
    });
  }
});

В своей текстовой области я поместил этот текст:

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

и я получаю в моей консоли следующий результат

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

Как видите, функция возвращает urlshortner, но исходный текст остается прежним. Мой ожидаемый результат: test utl function http://bit.l**** Успешный тест, но это не работает.

Answer 1

Я нашел решение по моей проблеме, я влияю на urllist[j] на текст новой переменной, потому что в функции контрольного списка urllist[j] возвращает неопределенное значение.

 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

При работе с textarea вы можете просто заменить их текст.

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

Answer 3

Вам нужно присвоить новое значение 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 определяется за пределами вашего for петля и используется внутри него urllist[i]=txtStr; но его значение никогда не присваивается, оно всегда = 0:

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