Logo

菜单

发布于 2025-12-07 0 阅读
0

Building a Simple URL Shortener With Just HTML and Javascript

仅使用 HTML 和 Javascript 构建简单的 URL 缩短器

FossURL

。

URL 缩短器，你可能在生活中用过，比如bit.ly、goo.gl等等。它们可以缩短较长的 URL，方便你与朋友、家人或同事轻松分享。

你可能想知道这些东西是如何工作的？为了理解它们的工作原理，我们需要仔细研究一下 URL 缩短器，所以我们将构建一个简单的 URL 缩短器。通过这个任务，我们将学习一些新知识，并了解 URL 缩短器的工作原理。

今天，我们将构建一个简单的 URL 缩短器，它不需要数据库系统来托管，相反，我们将使用jsonstore.io，我假设你已经了解一些基本的 HTML 和 Javascript。

因此，无需多言，让我们开始构建吧……

从 HTML 部分开始：

我们只需要一个文本输入框、一个按钮和一个脚本标签来创建我们的 URL 缩短器。

首先创建一个名为的HTML文件index.html，因为只需要两个元素，一个文本输入框，一个按钮。

那么让我们开始添加三个主要元素，

<html>
    <body>
        <input type="url" id="urlinput">
        <button onclick="shorturl()">Short The URL</button>
        <script src="main.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

如上面的代码所示，我创建了一个简单的 HTML 文件。在 body 标签内，只有三个元素：an input、abutton和 a script。

第一个元素是input我们输入/粘贴长 URL 的地方，我给它一个 id 名称，urlinput以便在 javascript 中轻松访问它。

下一个元素是button，当我们单击此按钮时，我们的长 URL 将被缩短，因为它具有onclick当我们单击按钮时将执行的函数，shorturl()函数内部将有缩短 URL 所需的命令。

最后，我们有一个script调用main.js，其中所有主要的 javascript 代码都将位于其中，上面提到的shorturl()函数也将在那里。

现在，我们的 HTML 部分已经完成。让我们开始编写一些 JavaScript

开始编写一些 Javascript：

正如上面所示，我们需要一些 javascript 来创建我们的 url 缩短器。

步骤 0：正如我首先提到的，我们将使用jsonstore.io来存储有关长 URL 的信息，我们需要一个jsonstore.io 端点URL 来存储数据，访问jsonstore.io，您将看到如下所示的内容

Jsonstore 截图

在文本“这是您的端点”下，您可以看到一个带有长 URL 的文本框，例如，

https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1
Enter fullscreen mode Exit fullscreen mode

单击紫色的复制按钮。

那么现在，让我们开始编写一些 javascript......

创建一个名为的 JavaScript 文件main.js并开始执行以下步骤

首先，我们必须将复制的链接保留为变量

var endpoint = "https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1";
Enter fullscreen mode Exit fullscreen mode

然后我们需要生成一些随机字符串，以便我们可以在短网址和长网址之间创建链接。

假设我们有一个随机的 URL abcd，我们的简单 URL 缩短器托管在https://shortner.com上，并且我们用该随机 URL 缩短了 URL https://google.com，因此每当我们访问https://shortner.com/#abcd时，我们都将被重定向到https://google.com

现在我们将创建一个名为getrandom()

function getrandom(){
    var random_string = Math.random().toString(32).substring(2, 5) + Math.random().toString(32).substring(2, 5);
    return random_string()
}
Enter fullscreen mode Exit fullscreen mode

别担心，我会帮助你理解上面的代码，

首先，我们启动一个名为的函数getrandom，然后初始化一个名为的变量random_string并赋予它一个值。

Math 是一个内置的 javascript 对象，它允许我们对数字执行数学任务。首先，我们random从调用函数Math，Math.random()返回 0（包含）和 1（不包含）之间的随机数

您可以Math从此处了解有关对象的更多信息

然后我们将返回的数字转换为字符串，toString()并使用 给它一个 32 的参数，这样我们就能得到一个正确的字符串，而不是二进制、十六进制或八进制。

然后我们substring(2,5)也使用它来切片字符串并保持字符串的大小，然后我们再次按照相同的过程来获取另一个随机字符串块，最后我们使用+

并且不要忘记添加return返回随机字符串的语句。

请记住，这不是生成随机字符串的唯一方法，您还可以使用下面提到的技术来实现目标


function getrandom() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < 5; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}
Enter fullscreen mode Exit fullscreen mode

现在返回index.html并添加 JQuery，因为如果我们使用 JQuery，就可以轻松实现我们的目标。

在 body 标签的末尾但在main.jsscript 标签之前添加

现在再次回到main.js

让我们创建一个名为的函数geturl，它将从输入框中获取值，验证它并返回该值


function geturl(){
    var url = document.getElementById("urlinput").value;
    var protocol_ok = url.startsWith("http://") || url.startsWith("https://") || url.startsWith("ftp://");
    if(!protocol_ok){
        newurl = "http://"+url;
        return newurl;
        }else{
            return url;
        }
}
Enter fullscreen mode Exit fullscreen mode

在函数中，geturl我们首先将输入框的值存储在url变量中。然后，我们检查 URL 协议是否正确，如果协议不是以 开头http://，https://或者我们在 URL 开头ftp://添加 ，然后返回 URL。http://

现在我们需要另一个函数来更改位置栏中的哈希值，让我们创建

function genhash(){
    if (window.location.hash == ""){
        window.location.hash = getrandom();
    }
}
Enter fullscreen mode Exit fullscreen mode

首先，我们检查哈希位置是否为空，如果为空，则向位置栏添加一个随机哈希。

例如：如果我们的 url 是https://example.com/#abcd那么的值window.location.hash将是#abcd

接下来，我们将处理我们的主要功能shorturl()，让我们开始吧......

function shorturl(){
    var longurl = geturl();
    genhash();
    send_request(longurl);
}
Enter fullscreen mode Exit fullscreen mode

首先，我们将长 URL 存储在longurl变量中，然后我们向位置栏添加一个随机哈希，以便我们可以将该 URL 用作短 URL，然后我们send_request()使用参数调用，在这个函数中，我们向jsonstorelongurl发送 JSON 请求来存储长 URL 以及指向短 URL 的链接，所以现在让我们创建该函数。send_request()


function send_request(url) {
    this.url = url;
    $.ajax({
        'url': endpoint + "/" + window.location.hash.substr(1),
        'type': 'POST',
        'data': JSON.stringify(this.url),
        'dataType': 'json',
        'contentType': 'application/json; charset=utf-8'
})
}
Enter fullscreen mode Exit fullscreen mode

这里我们使用 JQuery 发送 JSON 请求，我们将请求发送到端点+“/”+我们从位置栏中随机获得的字符串哈希
作为示例，

https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd
Enter fullscreen mode Exit fullscreen mode

因此，每当我们向上述 URL 发送 get 请求时，我们都会获得长 URL，如下所示data

重要提示send_request()：在函数前添加该函数shorturl()，否则将不起作用

要了解有关 JQuery 的 Ajax 函数的更多信息，请转到此处
要了解有关 JSON 的更多信息，请转到此处

现在我们将代码获取链接到地址栏中输入的短网址的长网址

var hashh = window.location.hash.substr(1)

if (window.location.hash != "") {
    $.getJSON(endpoint + "/" + hashh, function (data) {
        data = data["result"];

        if (data != null) {
            window.location.href = data;
        }

    });
Enter fullscreen mode Exit fullscreen mode

那么每当我们在地址栏中输入短网址时，就会执行上述代码（例如https://shorturl.com/#abcd）

首先，我们将 url 的哈希值存储到hashh变量中。

例如：如果我们的短网址是https://shorted.com/#abcd，则 hash 的值将是#abcd

然后我们检查哈希位置是否为空，如果不为空，我们向地址发送获取请求，endpoint+hashh

例子 ：

https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd
Enter fullscreen mode Exit fullscreen mode

和往常一样，如果一切正常，我们将从数据中获取长 URL，该 URL 是一个 JSON 数组数据，我们从中提取结果data["result"]。

数据的值将类似于此{"result":longurl,"ok":true}，其中长网址是您缩短的网址

我们的网址缩短器即将完成！复制粘贴一个长网址到输入框，然后点击“缩短网址”按钮！从地址栏复制链接，它就是你的短网址！

大家加油！

一些有用的技巧

我们可以添加一个功能，当用户单击“短URL”按钮时自动复制短 URL，使用SimpleCopy或ClipboardJS等库来复制当前在位置栏中的短 URL。

如果使用 SimpleCopy，我们可以simplecopy(window.location.href);在函数末尾添加shorturl()复制短网址，每当使用缩短网址时

这个简单的 URL 缩短器依赖于第三方库（例如jsonstore），因此用它来缩短一些机密的长 URL 并不是一个好主意。

您可以在 Github/Gitlab 页面中托管整个项目并设置一个简单的 CNAME，这样您的全新个人 url 缩短器就准备好了，您可以使用任何静态站点托管服务来托管您的 url 缩短器。

您可以在GITHUB中找到该项目的完整源代码

今天就到这里，这是我的第一篇技术指南文章，如有错误，敬请谅解。

如果您发现任何问题或错误，请在下面的评论中告诉我。

如果您喜欢我的作品（我的文章、故事、软件、研究等等），请考虑请我喝杯咖啡☕🤗

鏂囩珷鏉ユ簮锛�https://dev.to/bauripalash/building-a-simple-url-shortener-with-just-html-and-javascript-16o4
如何在 Android 上运行 C 程序
C 语言编程入门