JQuery на лету сокращение URL

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

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

Мысли?

Источник

6 ответов

Решение

Вот пример того, как получить сокращенный 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);
});
Источник

Я думаю, что API Bitly немного изменился. Теперь вам действительно нужен токен доступа для запроса короткого 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);
        }
    );
},
Источник

Вы также можете создать короткий 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 script 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 для более подробной информации

Источник

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

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

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

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

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

Источник

Почему бы не сделать JQuery POST для API Bit.ly? http://blog.themeforest.net/tutorials/creating-an-ajax-web-app-using-the-bitly-api/

Источник

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

Мой JQuery Url Shortener на Bitbucket

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

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

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

Источник
Другие вопросы по тегам