Как создать простое средство сокращения URL только с помощью HTML и JavaScript

1656521051 kak sozdat prostoe sredstvo sokrashheniya url tolko s pomoshhyu html

автор Палаш Баури

0ThhKRgVFLvyjmUr3n7uOy1GkSlHh98K1EIZ

Возможно, раньше вы использовали сокращение URL, например bit.ly, goo.gl. Они полезны для сокращения длинных 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>

Как я показал вам в коде выше, я создал простой HTML файл. Внутри тегов body есть только три элемента: a inputа button и а script.

Первым элементом является input куда мы введем/вставим наш длинный URL-адрес. Я дал ему идентификатор 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, где вы увидите что-то вроде ниже:

Z7nKP7sEB4Lu2PGz64A9-WkBvLlitPw3z64e

Под текстом Это ваша конечная точкавы можете увидеть текстовое поле с длинным URL-адресом, например:

https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1

Нажмите фиолетовый КОПИРОВАТЬ кнопку.

Итак, давайте начнем писать немного JavaScript. . .

Создайте JavaScript под названием main.js и начните выполнять следующие действия.

Во-первых, мы должны сохранить скопированную ссылку как переменную:

var endpoint = "https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1";

Затем нам нужно создать случайную строку, чтобы мы могли создать ссылку между коротким и длинным URL-адресом.

Предположим, что у нас есть случайный URL-адрес abcd, наше простое средство сокращения URL-адресов размещено на, и мы сократили URL-адрес с помощью этого случайного URL-адреса. Поэтому каждый раз, когда мы переходим к /#abcd, мы будем перенаправлены

Теперь хорошо создайте функцию под названием getrandom():

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

Не беспокойтесь, я помогу вам понять приведенный выше код.

Сначала мы запустили функцию под названием getrandom. Затем мы инициализировали переменную под названием random_string и придал ему значение.

Math – это встроенный объект Javascript, который позволяет выполнять математические задачи над числами. Сначала мы позвонили в random функция от Math , Math.random() возвращает случайное число от 0 (включительно) до 1 (исключительно).

Вы можете узнать больше о Math объект об этом.

Затем мы превращаем возвращенное число в строку с помощью toString() и мы даем ему аргумент 32, чтобы получить правильную строку, а не двоичную, шестнадцатеричную или восьмеричную.

Тогда используем substring(2,5) а также для того, чтобы нарезать строчку и сохранить ее размер. Затем мы снова выполняем ту же процедуру, чтобы получить еще один фрагмент случайной строки, и, наконец, мы добавляем обе части строки с помощью +.

И не забудьте добавить a 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;}

Теперь вернитесь к index.html и добавить JQuery, потому что будет легче достичь наших целей, если мы будем использовать JQuery. Добавьте его в конце тега body, но перед main.js тег сценария.

Теперь снова вернитесь к main.js.

Давайте создадим функцию под названием geturl который возьмет значение с поля ввода, проверит его и вернет значение:

function geturl(){     var url = document.getElementById(“urlinput”).value;     var protocol_ok = url.startsWith(“ || url.startsWith(“ || url.startsWith(“ftp://”);     if(!protocol_ok){         newurl = “         return newurl;     }else{         return url;     }

В geturl функции, мы сначала сохраняем значение поля ввода в url переменный. Затем мы проверяем, в порядке ли протоколы URL или нет. Если протокол не начинается с http:// , https:// или ftp:// добавляем http:// в начале URL-адреса, затем вернуть URL-адрес.

На самом деле, это не безопасный метод. Вы должны использовать регулярное выражение для проверки ваших URL! Но я хочу, чтобы статью было легко понять.

Теперь нам понадобится еще одна функция для смены хеша в строке расположения, так что давайте создадим ее:

function genhash(){    if (window.location.hash == “”){        window.location.hash = getrandom();    }}

Сначала мы проверяем, пустое ли местоположение хеша. Если он пуст, мы добавим случайный хеш в строку расположения.

Пример: если наш URL-адрес является значением window.location.hash будет #abcd.

Дальше мы поработаем над нашей основной функцией shorturl() то пойдем…

function shorturl(){    var longurl = geturl();    genhash();    send_request(longurl);}

Сначала мы сохраняем длинный URL-адрес в файле longurl переменный. Затем мы добавляем случайный хеш в строку расположения, чтобы мы могли использовать URL-адрес в качестве короткого URL-адреса. Дальше мы называем send_request() с аргументом longurl. В этой функции мы посылаем запрос JSON к jsonstore чтобы сохранить длинный 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’    })}

Здесь мы используем JQuery для отправки запроса JSON конечная точка+”/” + наш случайный хеш строки из строки расположения. Как пример:

https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd

Каждый раз, когда мы посылаем запрос на получение вышеупомянутого URL-адреса, мы получаем длинный URL-адрес как data.

Важно: добавить send_request() функция перед shorturl() функция, в противном случае она не будет работать.

Чтобы узнать больше о функции Ajax JQuery, перейдите ЗДЕСЬ. Чтобы узнать больше о JSON, перейдите ЗДЕСЬ.

Теперь мы будем использовать код, чтобы ПОЛУЧИТЬ длинный URL-адрес, связанный с коротким URL-адресом, введенным в адресной строке:

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

Тогда этот код будет выполняться каждый раз, когда мы вставим короткий URL-адрес в адресную строку (например, ).

Сначала мы сохраняем хэш-значения из URL-адреса в файле hashh переменный.

Пример: если наш короткий URL-адрес , значение хеша будет равно #а Б В Г.

Затем мы проверяем, пустое местоположение хеширования или нет. Если он не пуст, мы посылаем запрос на получение по адресу, endpoint + hashh.

пример:https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd

И, как обычно, если все в порядке, мы получим длинный URL-адрес из данных, являющихся данными массива JSON, и вытянем результат с помощью data["result"].

Значение данных будет подобным этому {"result":longurl,"ok":true} где длинный URL-адрес – это URL-адрес, который вы сократили.

Наш инструмент сокращения URL-адресов почти завершен! Скопируйте и вставьте длинный URL-адрес в поле ввода, а затем нажмите кнопку Сократите URL-адрес кнопка! Скопируйте ссылки с адресной строки — это ваш короткий URL!

KdWpDkClj9ekuuHM47166AbVxkxAT0GlFXvN

Некоторые полезные уловки

  • Мы можем добавить функцию автоматического копирования короткого URL-адреса, когда пользователь нажимает Сократите URL-адрес кнопка с помощью библиотек, таких как SimpleCopy или ClipboardJS – они скопируют короткий URL-адрес, который сейчас находится в строке расположения.
  • Если мы используем SimpleCopy, мы можем добавить simplecopy(window.location.href); в конце shorturl() функция копирования короткого URL-адреса, когда он сокращает URL-адрес.
  • Это простое средство сокращения URL-адресов полагается на сторонние библиотеки, такие как jsonstore поэтому не было бы хорошей идеей сокращать с помощью него какой-либо конфиденциальный длинный URL-адрес.
  • Вы можете разместить весь проект на страницах Github/Gitlab и настроить простой CNAME. Вот и все — ваше новое персональное средство сокращения URL-адресов готов! Вы можете использовать любую статическую службу хостинга для размещения своего средства сокращения URL.
  • Вы можете найти полный исходный код проекта на GITHUB

Вот и все сегодня! Это мое первое техническое руководство, поэтому я прошу прощения за любые ошибки.

Если вы найдете какие-то проблемы или ошибки, сообщите мне в комментариях ниже?

Или позвоните ee на Facebook или Twitter!

Мир!

Добавить комментарий

Ваш адрес email не будет опубликован.