PROWARE tech
This simple code will convert links contained in plain text to HTML anchors. This code should be run on the client side, freeing server resources.
function createAnchorHTML(link) < var a = document.createElement("a"); a.target = "_blank"; // NOTE: can remove or change the target here a.href = link; a.appendChild(document.createTextNode(link)); return a.outerHTML; >var text = "This is a link http://test.com that will be parsed. This is another link https://www.test.com/?q=query%201&p=0123456789 that will be parsed." var linkRegex = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|. ;]*[-A-Z0-9+&@#\/%=~_|])/gim; var html = text.replace(linkRegex, createAnchorHTML("$1")); console.log(html); alert(html); Enter text with Hyper-text Transfer Protocol (HTTP) or Hyper-text Transfer Protocol Secure (HTTPS) links to see how they are parsed:
node-js
three-js
tutorial
JavaScript: About
JavaScript: Add Line Numbers to Preformatted Text
Automatically add line numbers to the HTML PRE element.
JavaScript: AJAX Library
A simple AJAX library for FormData and REST API.
JavaScript: AJAX Library for React
A simple AJAX library compatible with React.
JavaScript: AJAX Tutorial
A quick guide to Asynchronous JavaScript And XML (AJAX).
JavaScript: Analog Clock
Scalable analog clock made with HTML, CSS and JavaScript — no images required.
JavaScript: Animate-on-Scroll
Apply a CSS class to an element when it is scrolled into view to cause it to animate.
JavaScript: Auto-hide Text Sections That Are Too Long
Use HTML, CSS and JavaScript to better format a page by hiding large sections of text with a fade to a «read more» link that the user can choose to expand the text with. This is often used on user submitted comments.
JavaScript: Browser Window Utility
Find the true browser window size even if it has a scrollbar displayed.
JavaScript: Browser/Client Detection
Detect the browser and client that the end user is using.
JavaScript: Check for Mobile Device
How to determine if the browser is on a mobile device like Apple iPhone, Apple iPod, Google Android or Apple iPad including the iPad Pro with iPadOS version 15.x and 16.x or later.
JavaScript: Classes
Several ways to create classes.
JavaScript: Contact Form Creation Example
How to create a contact form using JavaScript createElement and appendChild procedures.
JavaScript: Cookie Utility
A utility to create, access and delete cookies from the browser.
JavaScript: Copy Text to Clipboard
How to copy text to the clipboard with Chrome, Edge, Firefox and Internet Explorer.
JavaScript: Determine HTML Element Position
Determine where an HTML object is on the screen.
JavaScript: Determine If an Element Has a Class
Determine if an HTML element has a class assigned to it.
JavaScript: Download Images with Progress Indicator Bar
How to download images to the browser while showing the user a percent completion of the download while they wait.
JavaScript: ES5 Array Methods
All the EcmaScript 5 Array Method Functions.
JavaScript: Event Utility
A utility for handling events in the browser.
JavaScript: How to Create WordPress Slugs
Create slugs with only standard characters for use in a URL or other purpose.
JavaScript: IE11 Array.isArray() Method/Function
Create the Array.isArray() function for Internet Explorer 11.
JavaScript: IE11 Math.trunc() Method/Function
Create the Math.trunc() function for Internet Explorer 11.
JavaScript: IE11 String.endsWith() Prototype/Function
Create the String.endsWith() prototype for Internet Explorer 11.
JavaScript: IE11 String.padEnd() Prototype/Function
Create the String.padEnd() prototype for Internet Explorer 11.
JavaScript: IE11 String.padStart() Prototype/Function
Create the String.padStart() prototype for Internet Explorer 11.
JavaScript: IE11 String.repeat() Prototype/Function
Create the String.repeat() prototype for Internet Explorer 11.
JavaScript: IE11 String.startsWith() Prototype/Function
Create the String.startsWith() prototype for Internet Explorer 11.
JavaScript: IE11 String.trim() Prototype/Function
Create the String.trim() prototype for Internet Explorer 11.
JavaScript: Is a Number a Power of Two (2)
How to check or determine if a number has a base of 2 without using modulo operations for maximum performance.
JavaScript: Lazy Load Images
Lazy load images; also works to know if an element has scrolled into view.
JavaScript: Make a Scroll Tracker for a Website
Use JavaScript, CSS and HTML to make a bar move across the screen of a website page to show the user where they are scrolled to.
JavaScript: Parallax Effect
Shift on x-axis and y-axis (horizontal and vertical) parallax effect library.
JavaScript: Parse Internet Links in Plain Text
Use Regex to parse Internet links in plain text and convert to HTML anchor elements.
JavaScript: Position HTML Element
Position a Speech Bubble (DIV Element) with object.getBoundingClientRect().
JavaScript: React without JSX
Learn React without using the large JSX framework.
JavaScript: Remove SCRIPT Elements from HTML
Use regular expressions to remove SCRIPT elements from HTML text.
JavaScript: REST API Tutorial
Understand how the REST API works with examples.
JavaScript: Reveal and Hide Password in HTML Textbox
Show or hide the password in HTML textboxes.
JavaScript: Slide-on-Scroll
Add a sliding effect to the page as it is scrolled.
JavaScript: Stop Developer Tools and the Inspect Element Option
How to disable F12 and Ctrl+Shift+I for developer tools and the inspect element context menu option on all browsers.
JavaScript: Tips and Tricks
Useful tips and tricks for the budding JavaScript programmer.
JavaScript: URI/URL Parser
Parse a URI/URL location; separate the parameters, hashtag; automatically generate arrays for multiple valued parameters.
JavaScript: Validate Credit Card Number
Use the Luhn Check to validate credit card numbers.
JavaScript: Validate Email Address
How to validate email addresses by checking their format using client-side code.
JavaScript: Whole Website Example
An idea for a whole website using mostly HTML/CSS with just a little JavaScript.
Как разобрать URL в JavaScript?
Представляю Вашему вниманию перевод заметки «How to Parse URL in JavaScript: hostname, pathname, query, hash» автора Dmitri Pavlutin.
Унифицированный указатель ресурса или, сокращенно, URL — это ссылка на веб-ресурс (веб-страницу, изображение, файл). URL определяет местонахождения ресурса и способ его получения — протокол (http, ftp, mailto).
Например, вот URL данной статьи:
https://dmitripavlutin.com/parse-url-javascript Часто возникает необходимость получить определенные элементы URL. Это может быть название хоста (hostname, dmitripavlutin.com ) или путь (pathname, /parse-url-javascript ).
Удобным способом получить отдельные компоненты URL является конструктор URL() .
В этой статье мы поговорим о структуре и основных компонентах URL.
1. Структура URL
Изображение лучше тысячи слов. На представленном изображении Вы можете видеть основные компоненты URL:
2. Конструктор URL()
Конструктор URL() — это функция, позволяющая разбирать (парсить) компоненты URL:
const url = new URL(relativeOrAbsolute [, absoluteBase]) Аргумент relativeOrAbsolute может быть абсолютным или относительным URL. Если первый аргумент — относительная ссылка, то второй аргумент, absoluteBase , является обязательным и представляет собой абсолютный URL — основу для первого аргумента.
Например, инициализируем URL() с абсолютным URL:
const url = new URL('http://example.com/path/index.html') url.href // 'http://example.com/path/index.html' Теперь скомбинируем относительный и абсолютный URL:
const url = new URL('/path/index.html', 'http://example.com') url.href // 'http://example.com/path/index.html' Свойство href экземпляра URL() возвращает переданную URL-строку.
После создания экземпляра URL() , Вы можете получить доступ к компонентам URL. Для справки, вот интерфейс экземпляра URL() :
Здесь тип USVString означает, что JavaScript должен возвращать строку.
3. Строка запроса (query string)
Свойство url.search позволяет получить строку запроса URL, начинающуюся с префикса ? :
const url = new URL( 'http://example.com/path/index.html?message=hello&who=world' ) url.search // '?message=hello&who=world' Если строка запроса отсутствует, url.search возвращает пустую строку (»):
const url1 = new URL('http://example.com/path/index.html') const url2 = new URL('http://example.com/path/index.html?') url1.search // '' url2.search // '' 3.1. Разбор (парсинг) строки запроса
Вместо получения исходной строки запроса, мы можем получать ее параметры.
Легкий способ это сделать предоставляет свойство url.searchParams . Значением данного свойства является экземпляр интерфейса URLSeachParams.
Объект URLSearchParams предоставляет множество методов для работы с параметрами строки запроса ( get(param), has(param) и т.д.).
Давайте рассмотрим пример:
const url = new Url( 'http://example.com/path/index.html?message=hello&who=world' ) url.searchParams.get('message') // 'hello' url.searchParams.get('missing') // null url.searchParams.get(‘message’) возвращает значение параметра message строки запроса.
Доступ к несуществующему параметру url.searchParams.get(‘missing’) возвращает null .
4. Название хоста (hostname)
Значением свойства url.hostname является название хоста URL:
const url = new URL('http://example.com/path/index.html') url.hostname // 'example.com' 5. Путь (pathname)
Свойство url.pathname содержит путь URL:
const url = new URL('http://example.com/path/index.html?param=value') url.pathname // '/path/index.html' Если URL не имеет пути, url.pathname возвращает символ / :
const url = new URL('http://example.com/'); url.pathname; // '/' 6. Хеш (hash)
Наконец, хеш может быть получен через свойство url.hash :
const url = new URL('http://example.com/path/index.html#bottom') url.hash // '#bottom' Если хеш отсутствует, url.hash возвращает пустую строку (»):
const url = new URL('http://example.com/path/index.html') url.hash // '' 7. Проверка (валидация) URL
При вызове конструктора new URL() не только создается экземпляр, но также осуществляется проверка переданного URL. Если URL не является валидным, выбрасывается TypeError .
Например, http ://example.com не валидный URL, поскольку после http имеется пробел.
Попробуем использовать этот URL:
Поскольку ‘http ://example.com’ неправильный URL, как и ожидалось, new URL(‘http ://example.com’) выбрасывает TypeError .
8. Работа с URL
Такие свойства, как search, hostname, pathname, hash доступны для записи.
Например, давайте изменим название хоста существующего URL с red.com на blue.io :
const url = new URL('http://red.com/path/index.html') url.href // 'http://red.com/path/index.html' url.hostname = 'blue.io' url.href // 'http://blue.io/path/index.html' Свойства origin, searchParams доступны только для чтения.
9. Заключение
Конструктор URL() является очень удобным способом разбора (парсинга) и проверки (валидации) URL в JavaScript.
new URL(relativeOrAbsolute, [, absoluteBase] в качестве первого параметра принимает абсолютный или относительный URL. Если первый параметр является относительным URL, вторым параметром должен быть абсолютный URL — основа для первого аргумента.
После создания экземпляра URL() , Вы можете получить доступ к основным компонентам URL:
- url.search — исходная строка запроса
- url.searchParams — экземпляр URLSearchParams для получения параметров строки запроса
- url.hostname — название хоста
- url.pathname — путь
- url.hash — значение хеша