JavaScript implements HTTP address detection and adds URL links

First, I am born to use the material will be useful

Automatically adding URL links to HTTP characters is one of the more common features. Take two I recently commonly used to automatically detect http://Address and add links to the example bar, the first is the QQ mailbox, when using the QQ mailbox, if you enter the URL address (http://or https://start), then QQ mailbox will automatically add to this address can open links. As shown in the following:

There are micro-blog products, such as Twitter(zxx://can follow empty sister Oh ~ ~ ^_^), or domestic Sina Weibo. When your Weibo message has a URL address similar to http://www.zhangxinxu.com/, when the information is published, the addresses are automatically linked, not just plain text, see the following test:

When this message is published, it is displayed as:

When my fans click on this link, they can access my article.

Second, the implementation of automatic URL address addition

The implementation of the URL automatically added is a bit of content: detection and substitution.

Detection
"Detection" is the detection of text (strings) within the content of the HTTP address, obviously, this need to use regular expression validation, this work front-end and the background can be done, here, only the front-end method, using JavaScript implementation.

Verify that the regular expression for the HTTP address is as follows (there may be omissions or inaccuracies, please correct it):

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

The first part matches the URL string address at the beginning of http or HTTPS, followed by some characters, English characters, underscore (_), Dot (.), question mark (?). and an equal sign (=), connecting a short line (-), and so on.

Replace
When it comes to the substitution feature in JavaScript, the first thing to think about is the Replace property, where the Replace property is powerful because it supports regular expressions and can be replaced with regular strings. For example, we would replace the spaces at both ends of the string with a statement similar to the following:

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

You will get "blank", and the space on both ends is removed. Similarly, it is only possible to replace the matching HTTP address with an HTTP address that contains the href attribute nested in the <a> tag.

Now there's a question of how to get a matching string efficiently. In regular expressions, there is a concept called grouping and reverse referencing. For example, with a regexp constructor, after the test () method is called, all the reverse references are saved in the RegExp constructor, starting with the regexp.$1 (which holds the first reverse reference), or, if there is a second reverse reference, the regexp.$ 2, if there is a third, is regexp.$3, and so on.

A reverse reference can also be used in the Replace method of a String object, which is the method of replacing the string used in this article, so we can use $ $ to get the grouped contents of regular expressions for efficient regular substitution. See the following code:

var v = "Welcome to my personal site: http://www.zhangxinxu.com/"; v = v.replace (Reg, "<a href= ' $1$2 ' >$1$2</a>"); The Reg here is the above regular expression alert (v);

The results will pop up similar results:

Combination and refinement
Based on some of the above analysis, we can now refine the method of replacing http://String into an inheritable form, as shown in the following code (the method is named Httphtml, which adapts to all strings).

String.prototype.httpHtml = function () {var reg =/(http:\/\/|https:\/\/) (\w|=|\?| \.| \/|&|-) +)/g;return this.replace (Reg, ' <a href= ' $1$2 ' >$1$2</a> ');}; var v = "Welcome to my personal website: http://www.zhangxinxu.com/"; alert (v.httphtml ());

As a result, this code shows almost the same result as the quotation marks (the difference between quotes):

Third, simple example

We can simulate the implementation of the automatic link after Sina Weibo with/HTTP content.

You can really click here: HTTP address automatically add link demo

The operation is as follows:

You can also modify the text content in the field to test accordingly. There is no use of the httphtml () method above, one reason is to process the line breaks in the text field.

Four, I am a small bird

I, especially in the JS this piece, Caishuxueqian, limited qualifications, need to learn a lot, there is an inaccuracy in the expression is unavoidable.

If you find that the article is inaccurate or has a related problem, you can talk about it by commenting or by going here.
Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=749

(End of this article)

JavaScript implements HTTP address detection and adds URL links