Как построить простой сокращение URL с помощью HTML и JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Палаш Баури

Вы могли бы использовать URL-короткую запись раньше, например Bit.ly , goo.gl. . Они полезны для сокращения длинных URL, чтобы вы могли легко делиться ими с друзьями, семьей или сотрудниками.

Вам может быть интересно, как эти вещи работают. Чтобы понять, как нам нужно поближе взглянуть на короткоформат URL-URL – так что мы будем строить простой! С этой задачей мы будем изучать некоторые новые вещи, а также понимание того, как работает коробка URL.

Сегодня мы будем создавать простой короткограмма URL, который не нуждается в системе базы данных для его размещения. Вместо этого мы будем использовать jsonstore.io Отказ Я прилагаю, что вы уже знаете какой-то базовый HTML & JavaScript.

Так что без дальнейшего ADO давайте начнем строить. Отказ Отказ

Начните с HTML

Нам понадобится только ввод текстового ввода, кнопка и тег сценария для создания нашего URL-краткости.

Сначала создайте файл HTML под названием index.html , поскольку для этих двух элементов есть только необходимость (вход текстового ввода и кнопка).

Итак, давайте начнем добавлять наши три основных элемента:

   Short The URL  

Поскольку я показал вас в вышеуказанном коде, я создал простой HTML-файл. Внутри тегов тела есть только три элемента: a вход , а кнопка и а Сценарий Отказ

Первый элемент – вход Где мы будем вставлять/вставить наш длинный URL. Я дал ему удостоверение личности urlinput. Так что было бы легко доступен в JavaScript.

Следующий элемент – это кнопка . Когда мы нажимаем эту кнопку, наш длинный URL будет сокращен, поскольку у него есть по щелчку Функция, которая будет выполнена, когда мы нажимаем кнопку. И внутри Shoturl () Функция там будут команды необходимы для сокращения URL.

В конце у нас есть Сценарий называется main.js где все наш основной код JavaScript будет. Вышеупомянутая Shoturl () Функция также будет там.

Итак, на данный момент наша HTML-часть завершена. Давайте начнем написать немного JavaScript

Начните писать какой-нибудь JavaScript

Как мы показали выше, нам понадобится JavaScript для создания вашего URL-записи.

Шаг 0: Как я уже упоминал, мы будем использовать jsonstore.io хранить информацию о нашем длинном URL. Нам понадобится jsonstore.io конечная точка URL для хранения данных, так что вы можете посетить jsonstore.io Где вы увидите что-то вроде ниже:

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

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

Нажмите на фиолетовый Скопировать кнопка.

Так что теперь, давайте начнем написать немного JavaScript. Отказ Отказ

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

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

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

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

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

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

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

Во-первых, мы начали функцию под названием Гетрандом Отказ Затем мы инициализировали переменную под названием Random_String и дал ему ценность.

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

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

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

И не забудьте добавить Возвращение Заявление, возвращая нашу случайную строку.

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. Добавьте его в конце тега тела, но перед main.js Тег скрипта.

Теперь снова вернуться в 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;     }

В geturl Функция, мы впервые храним значение ввода ввода в URL Переменная. Затем мы проверяем, будут ли протоколы URL-адреса в порядке или нет. Если протокол не начнется с http:// , https:// или FTP:// Мы добавляем http:// В начале URL верните URL.

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

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

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

Далее мы будем работать над нашей главной функцией Shoturl () , Итак, начнем…

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

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

Важно : Добавьте send_request () Функция перед Shoturl () Функция, иначе она не будет работать.

Теперь мы будем использовать код, чтобы получить длинный 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 в адресной строке (например, https://shorturl.com/#abcd ).

Во-первых, мы храним значение хеша с URL в хеш Переменная.

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

И как обычно, если все в порядке, мы получим длинный URL от данных, которые являются данными массива JSON, и от того, что мы извлекаем результат с Данные [«Результат»] Отказ

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

Некоторые полезные хитрости

• Мы можем добавить функцию, чтобы автоматически скопировать короткий URL, когда пользователь нажимает на Укоротить URL кнопка с использованием библиотек, таких как Simplecopy или Клитросборда – Они будут скопировать короткий URL, который в настоящее время находится в баре местоположения.
• При использовании SimpleCopy мы можем добавить SimpleCopy (Window.Location.HREF); В конце Shoturl () Функция для копирования короткого URL всякий раз, когда он сокращает URL.
• Этот простым URL-краткости полагается на сторонние Libs, такие как jsonstore. Так что не было бы неплохо, чтобы сократить конфиденциальный длинный URL.
• Вы можете принять весь проект на страницах GitHub/GitLab и настроить простое cname. Вот и все – ваш новый персональный URL-молния готов! Вы можете использовать любую услугу хостинга статического сайта для размещения вашего URL-записи.
• Вы можете найти полный исходный код проекта на Гадость

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

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

Или пинг EE на Facebook или Твиттер!

Мир!

Оригинал: “https://www.freecodecamp.org/news/building-a-simple-url-shortener-with-just-html-and-javascript-6ea1ecda308c/”