jQuery on the fly URL 缩短器

Posted

技术标签:

【中文标题】jQuery on the fly URL 缩短器【英文标题】:jQuery on the fly URL shortener 【发布时间】:2010-12-18 18:55:33 【问题描述】:

我正在寻找一个动态 URL 缩短器,就像 tweetdeck 的工作原理一样。我发现许多 jQuery 和通用 javascript 插件在按下按钮时采用 url 并通过缩短服务(如 bit.ly)运行它。但是,我还没有找到一个可以即时完成的。我的第一个问题是这是否已经存在于某个地方?其次,如果没有,那么识别需要在文本框中缩短的 URL 的最佳方法是什么?我的想法:

    在该文本区域的 onKeyUp 上遍历文本寻找 http 如果找到获取整个 URL(如何确定结尾?可以是句点、逗号、空格等...) 确保 URL 不是 bit.ly URL 验证 URL(发出请求并确保 http 响应没有错误,bit.ly 是否已经这样做了?) 如果有效,将 url 发送到 bit.ly 的 API 并获取响应 将文本区域中的长 URL 替换为短 URL。

想法?

【问题讨论】:

不确定您将使用它来做什么,但如果您要让用户输入数据,您可能需要扩展第 3 步以包含更多 URL 缩短服务,而不仅仅是 bit.ly。除非您可以将 bit.ly 地址重定向到 tinyurl.com 地址(例如)重定向到最终目的地。 您可以只缩短长度超过 x 个字符的 URL,而不是确保它不是 bit.ly URL。例如,今天 tinyurl.com 使用 27 个字符。 earcar 你在哪里找到不同服务的最小长度? 【参考方案1】:

飞行钻头将很难可靠和快速地制造。

人们大部分时间都不会输入 http 甚至 www。

正如您所说,结尾将很难确定网址是否包含空格,或者更糟的是,由于用户没有输入空格,因此会进入下一个句子

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

我认为最好的解决方案是文本编辑器上的“插入缩短的 url”按钮,它允许人们这样做。或者,在发布帖子时在服务器端执行。

【讨论】:

帖子有一个最大长度,动态缩短可以让他们有更多的字符来发布他们的帖子【参考方案2】:

为什么不对 Bit.ly API 做一个 jQuery POST? http://blog.themeforest.net/tutorials/creating-an-ajax-web-app-using-the-bitly-api/

【讨论】:

问题是他们的帖子中只能包含 X 个字符,并且即时缩短他们的 URL 会给他们额外的字符【参考方案3】:

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

我在 Bitbucket 上的jQuery Url Shortener

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

只是觉得你可能会觉得它很有用。

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

【讨论】:

嗨 Jiaaro - 我使用了这个,并且必须进行一些小改动以支持 URL 编码。将第 6 行更改为:+"&longUrl="+encodeURIComponent(longUrl) - 感谢有用的插件。【参考方案4】:

这是一个如何使用 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);
);

【讨论】:

Bitly API 已更改。见my answer【参考方案5】:

您还可以在服务器上使用 php 和 curl 生成一个短 url,这样您就不必在网页中公开您的 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了解更多详情

【讨论】:

【参考方案6】:

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

按照best practices,我创建了以下纯Javascript sn-p:

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

【讨论】:

以上是关于jQuery on the fly URL 缩短器的主要内容,如果未能解决你的问题,请参考以下文章

TAR-ing on-the-fly

PHP on the fly ZIP 下载为空白

Apache Rewrite - 重定向通配符子域和处理内部 URL 缩短器

R Highcharter:Shiny on the fly 中的动态钻取

UE4 Cook On The Fly通过数据线连接Android手机

UE4 Cook On The Fly通过数据线连接Android手机