JQuery "на лету"

Я ищу кратковременный URL-адрес, похожий на то, как работает tweetdeck. Я нашел много jQuery и общих плагинов javascript, которые берут URL-адрес и запускают его через службу сокращения, например bit.ly, когда нажата кнопка. Однако я не смог найти тот, который делает это на лету. Мой первый вопрос заключается в том, что это уже существует где-то? Во-вторых, если это не так, то каким будет лучший способ распознать URL-адрес, который нужно укоротить внутри текстового поля? Мои мысли:

  • В onKeyUp этой текстовой области просматривается текст, ищущий http
  • Если найденный захват всего URL-адреса (как определить конец? может быть периодом, запятой, пробелом и т.д.)
  • Убедитесь, что URL-адрес еще не имеет URL-адреса bit.ly.
  • Подтвердите URL-адрес (сделайте запрос и убедитесь, что HTTP-ответ не является ошибкой, делает bit.ly уже это?)
  • Если это действительно так, отправьте URL-адрес в bit.ly API и получите ответ
  • Заменить длинный URL с коротким URL-адресом в текстовой области.

Мысли?

Ответы

Ответ 1

Вот пример, как получить сокращенный URL-адрес с Bitly API и jQuery:

function get_short_url(long_url, login, api_key, func)
{
    $.getJSON(
        "http://api.bitly.com/v3/shorten?callback=?", 
        { 
            "format": "json",
            "apiKey": api_key,
            "login": login,
            "longUrl": long_url
        },
        function(response)
        {
            func(response.data.url);
        }
    );
}

Для получения короткого URL-кода можно использовать следующий код:

/*
Sign up for Bitly account at
 https://bitly.com/a/sign_up

and upon completion visit
https://bitly.com/a/your_api_key/ 
to get "login" and "api_key" values
*/
var login = "LOGIN_HERE";
var api_key = "API_KEY_HERE";
var long_url = "http://www.kozlenko.info";

get_short_url(long_url, login, api_key, function(short_url) {
    console.log(short_url);
});

Ответ 2

Я предполагаю, что API Битли немного изменился. Теперь вам действительно нужен токен доступа, чтобы запросить короткий URL.

Следуя рекомендациям я создал следующий фрагмент Javascript:

getShortUrl: function(url, callback)
{
   var accessToken = '___YOUR_ACCESS_TOKEN___';
   var url = 'https://api-ssl.bitly.com/v3/shorten?access_token=' + accessToken + '&longUrl=' + encodeURIComponent(url);

    $.getJSON(
        url,
        {},
        function(response)
        {
            if(callback)
                callback(response.data.url);
        }
    );
},

Ответ 3

Бит на лету будет сложно сделать надежным и быстрым.

Люди не будут набирать http большую часть времени или даже www.

В конце, как вы сказали, будет сложно определить, содержит ли URL-адрес пробел или что-то еще, в следующее предложение, потому что пользователь не вставил пробел.

И что, если людям нужно изменить URL-адрес после того, как они набрали http://stakoverflow.com/ вместо /fooobar.com/...?

Я думаю, что лучшим решением будет кнопка "вставить сокращенный URL" в текстовом редакторе, которая позволяла бы людям делать именно это. Или, сделайте это на стороне сервера, когда сообщение сделано.

Ответ 4

Вы также можете создать короткий URL-адрес с php и curl на сервере, так что вам не нужно выставлять свой ключ API на веб-странице:

<?php
    //the long url posted by your webpage
    $url = strip_tags($_POST["url"]);

    $api_user = "your_bitly_user_name";
    $api_key = "your_bitly_api_key";

    //send it to the bitly shorten webservice
    $ch = curl_init ("http://api.bitly.com/v3/shorten?login=$api_user&apiKey=$api_key&longUrl=$url&format=json");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //the response is a JSON object, send it to your webpage
    echo curl_exec($ch);    
?>

Затем на вашей веб-странице код должен выглядеть примерно так:

    //the long url that you want to shorten
    var longUrl = escape(window.location.href)

    $.ajax({
        url : "php/getShortUrl.php",//this is the PHP скрипт above
        dataType : "json",
        type : "POST",
        data : {
            url : longUrl
        },
        success : function(data) {
            if(data.status_txt === "OK"){
                shortUrl = data.data.url;
            }
        },
        error : function(xhr, error, message) {
            //no success, fallback to the long url
            shortUrl = longUrl
        }
    });

Подробнее см. bitly API.

Ответ 6

Я нашел ваше сообщение, ища что-то подобное, и в итоге просто написал плагин jQuery, который обеспечивает (по крайней мере, часть) то, что вы ищете.

My jQuery Url Shortener на Bitbucket

Это очень простой плагин; Мне не нужно было сокращать URL-адреса пользователей, поэтому у меня нет проверки длины или проверки URL-адресов, прежде чем сокращать его, хотя я не прочь добавить эти типы функций.

Просто подумал, что это может быть полезно.

Что касается распознавания URL-адресов в вашем текстовом поле, я бы предложил использовать RegEx для соответствия URL-адресу.