jQuery即时URL缩短

时间:2009-11-20 15:52:38

标签: javascript jquery url-rewriting bit.ly url-shortener

我正在寻找一种即时网址缩短器,就像tweetdeck的工作原理一样。我找到了许多jQuery和一般的javascript插件,它们接受一个url并在按下按钮时通过缩短服务(例如bit.ly)运行它。但是,我还没能找到一个在飞行中做到这一点。我的第一个问题是这已经存在于某个地方吗?其次,如果没有,那么识别需要在文本框中缩短的URL的最佳方法是什么?我的想法:

  1. 在该文本区域的onKeyUp上运行查找http
  2. 的文本
  3. 如果找到了抓取整个网址(我如何确定结束?可以是句号,逗号,空格等......)
  4. 确保该网址不是bit.ly网址
  5. 验证URL(发出请求并确保http响应不是错误,bit.ly已经这样做了吗?)
  6. 如果有效,请将网址发送到bit.ly的API并获取响应
  7. 将长网址替换为文字区域中的短网址。
  8. 思想?

6 个答案:

答案 0 :(得分:18)

以下是如何使用Bitly API和jQuery获取缩短的URL的示例:

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

以下代码可用于获取简短的网址:

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

答案 1 :(得分:8)

我猜Bitly的API略有改变。您现在只需要一个访问令牌来请求一个简短的URL。

best practices之后,我创建了以下仅限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);
        }
    );
},

答案 2 :(得分:4)

飞行中的位很难变得可靠和快速。

人们不会在大多数情况下输入http甚至www。

最后,就像你说的那样,很难确定网址是否包含空格或者更糟糕,因为用户没有放入空格,所以会遇到下一句话。

如果人们需要在事后更改网址,因为他们输入了http://stakoverflow.com/而不是https://stackoverflow.com/该怎么办?

我认为最好的解决方案是在文本编辑器上添加一个“插入缩短的URL”按钮,让人们可以做到这一点。或者,在发布帖子时,在服务器端执行此操作。

答案 3 :(得分:4)

您还可以在服务器上生成一个包含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

答案 4 :(得分:0)

答案 5 :(得分:0)

我在寻找类似的东西时找到了你的帖子,最终只写了一个jQuery插件,提供了(至少部分)你正在寻找的东西。

我在Bitbucket上的jQuery Url Shortener

这是一个非常简单的插件;我不需要缩短用户的网址,所以在缩短用户之前我没有任何长度检查或网址测试,但我并不反对添加这些类型的功能。

只是觉得你觉得它很有用。

至于识别文本框中的网址,我建议您使用RegEx to match the url