Home Web Front-end JS Tutorial Share the method of automatically adding links to text URL addresses using javascript_javascript skills

Share the method of automatically adding links to text URL addresses using javascript_javascript skills

May 16, 2016 pm 05:03 PM
url text Link

The implementation of automatic addition of URL addresses actually consists of just that: detection and replacement.

Detection

"Detection" is to detect whether there is content in the text (string) that matches the http address. Obviously, this requires the use of regular expressions for verification. This work can be done by both the front-end and the back-end. Here, only the front-end method is discussed , implemented using JavaScript.

The regular expression to verify the HTTP address is as follows (there may be omissions or inaccuracies, please correct me):

Copy code The code is as follows:

var reg = /(http://|https: //)((w|=|?|.|/|&|-) )/g;

The first part matches the URL string address starting with http or https, the latter part matches some characters, English characters, underscore (_), period (.), question mark (?) and equal sign (=), connecting short lines (-)wait.

Replace www.jb51.net
When it comes to the replacement function in JavaScript, the first thing that comes to mind is naturally the replace attribute. The power of the replace attribute is that it supports regular expressions and can replace strings that conform to regular expressions. . For example, if we want to replace the spaces at both ends of the string, we can use a statement similar to the following:

Copy code The code is as follows:

var s = " blank ";
s = s.replace(/^s (.*?)s $/, "");
alert(s);

will get "blank", and the spaces at both ends will be removed. Similarly, just replace the matching http address with the http address containing the href attribute nested in the tag

For example, this expression can match URL addresses of http, https, ftp, ftps and IP addresses.

Copy code The code is as follows:

var URL = /(https?://|ftps ?://)?((d{1,3}.d{1,3}.d{1,3}.d{1,3})(:[0-9] )?|([w] .)(S )(w{2,4})(:[0-9] )?)(/?([w#!:.? =&%@!-/] ))?/ig;

The URL address matching calculation is relatively complete. Using this expression, I wrote two small functions to replace the URL address of the user's message with a clickable link. There is nothing too difficult. Just use JavaScript's replace() function to replace the URL with link:

Copy code The code is as follows:

/**
* JavaScript version
* Convert URL address into complete A tag link code
*/

var replaceURLToLink = function (text) {
text = text.replace(URL, function (url) {
var urlText = url;
if (!url.match('^https?: //')) {
           url = 'http://' url;
return text;
};

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1268
29
C# Tutorial
1248
24
How to use magnet links How to use magnet links Feb 18, 2024 am 10:02 AM

Magnet link is a link method for downloading resources, which is more convenient and efficient than traditional download methods. Magnet links allow you to download resources in a peer-to-peer manner without relying on an intermediary server. This article will introduce how to use magnet links and what to pay attention to. 1. What is a magnet link? A magnet link is a download method based on the P2P (Peer-to-Peer) protocol. Through magnet links, users can directly connect to the publisher of the resource to complete resource sharing and downloading. Compared with traditional downloading methods, magnetic

How to download links starting with 115://? Download method introduction How to download links starting with 115://? Download method introduction Mar 14, 2024 am 11:58 AM

Recently, many users have been asking the editor, how to download links starting with 115://? If you want to download links starting with 115://, you need to use the 115 browser. After you download the 115 browser, let's take a look at the download tutorial compiled by the editor below. Introduction to how to download links starting with 115:// 1. Log in to 115.com, download and install the 115 browser. 2. Enter: chrome://extensions/ in the 115 browser address bar, enter the extension center, search for Tampermonkey, and install the corresponding plug-in. 3. Enter in the address bar of 115 browser: Grease Monkey Script: https://greasyfork.org/en/

How to get the WeChat video account link? How to add product links to WeChat video account? How to get the WeChat video account link? How to add product links to WeChat video account? Mar 22, 2024 pm 09:36 PM

As part of the WeChat ecosystem, WeChat video accounts have gradually become an important promotion tool for content creators and merchants. Getting links to video accounts on this platform is crucial for sharing and disseminating content. The following will introduce in detail how to obtain the WeChat video account link and how to add product links to the video account to improve the dissemination effect of the content. 1. How to get the WeChat video account link? After posting a video on your WeChat video account, the system will automatically create a video link. Authors can copy the link after publishing to facilitate sharing and dissemination. After logging in to your WeChat video account, you can browse the homepage of your video account. On the home page, each video is accompanied by a corresponding link so you can copy or share it directly. 3. Search video account: Enter the video account name in the WeChat search box

Why NameResolutionError(self.host, self, e) from e and how to solve it Why NameResolutionError(self.host, self, e) from e and how to solve it Mar 01, 2024 pm 01:20 PM

The reason for the error is NameResolutionError(self.host,self,e)frome, which is an exception type in the urllib3 library. The reason for this error is that DNS resolution failed, that is, the host name or IP address attempted to be resolved cannot be found. This may be caused by the entered URL address being incorrect or the DNS server being temporarily unavailable. How to solve this error There may be several ways to solve this error: Check whether the entered URL address is correct and make sure it is accessible Make sure the DNS server is available, you can try using the "ping" command on the command line to test whether the DNS server is available Try accessing the website using the IP address instead of the hostname if behind a proxy

PHP function introduction—get_headers(): Get the response header information of the URL PHP function introduction—get_headers(): Get the response header information of the URL Jul 25, 2023 am 09:05 AM

PHP function introduction—get_headers(): Overview of obtaining the response header information of the URL: In PHP development, we often need to obtain the response header information of the web page or remote resource. The PHP function get_headers() can easily obtain the response header information of the target URL and return it in the form of an array. This article will introduce the usage of get_headers() function and provide some related code examples. Usage of get_headers() function: get_header

How to connect Apple Notes on iPhone in the latest iOS 17 system How to connect Apple Notes on iPhone in the latest iOS 17 system Sep 22, 2023 pm 05:01 PM

Link AppleNotes on iPhone using the Add Link feature. Notes: You can only create links between Apple Notes on iPhone if you have iOS17 installed. Open the Notes app on your iPhone. Now, open the note where you want to add the link. You can also choose to create a new note. Click anywhere on the screen. This will show you a menu. Click the arrow on the right to see the "Add link" option. click it. Now you can type the name of the note or the web page URL. Then, click Done in the upper right corner and the added link will appear in the note. If you want to add a link to a word, just double-click the word to select it, select "Add Link" and press

How to stop Outlook from opening links in Edge browser How to stop Outlook from opening links in Edge browser Aug 03, 2023 am 11:49 AM

How to Stop Outlook from Opening Links in Edge Before proceeding, make sure your preferred browser is set as the default browser in Windows. This ensures that the Outlook link opens in the desired browser. To check and set your default browser: For Windows 10: Click the Start menu and select Settings Go to Apps and then Default Apps Look for "Web Browser" at the bottom of the list of default apps ” If your preferred browser is listed, you’re all set. If Microsoft Edge is listed, click on it and select your preferred browser from the list. If prompted, click Switch Anyway. Fix Edge issues

What is the difference between html and url What is the difference between html and url Mar 06, 2024 pm 03:06 PM

Differences: 1. Different definitions, url is a uniform resource locator, and html is a hypertext markup language; 2. There can be many urls in an html, but only one html page can exist in a url; 3. html refers to is a web page, and url refers to the website address.

See all articles