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

WBOY
Release: 2016-05-16 17:03:16
Original
1290 people have browsed it

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

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template