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 <a> 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 Article Tags

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)

How to use magnet links How to use magnet links Feb 18, 2024 am 10:02 AM

How to use magnet links

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

How to download links starting with 115://? Download method introduction

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

How to get the WeChat video account link? How to add product links to WeChat video account?

What are the requirements for a video link? How to link the video account with goods? What are the requirements for a video link? How to link the video account with goods? Mar 07, 2024 pm 01:13 PM

What are the requirements for a video link? How to link the video account with goods?

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

How to connect Apple Notes on iPhone in the latest iOS 17 system

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(): Get the response header information of the URL

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 browser

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

Why NameResolutionError(self.host, self, e) from e and how to solve it

See all articles