How to check if url scheme is present in a url string javascript

Question

I am trying to solve an issue where I need to know if there is a URL scheme (not limited to http, https) prepended to my url string. I could do link.indexOf(://); and then take the substring of anything before the "://", but if I have a case for eg:

example.com?url=http://www.eg.com

in this case, the substring will return me the whole string i.e. example.com?url=http which is incorrect. It should return me "", since my url does not have a protocol prepended.

I need to find out whether the url is prepended with a protocol or not.

samanime · Accepted Answer · 2017-05-02 16:02:25Z

5

You can do it quite easily with a little bit of regex. The pattern /^[a-z0-9]+:\/\// will be able to extract it.

If you just want to test if it has it, use pattern.test() to get a boolean:

/^[a-z0-9]+:\/\//.test(url); // true

If you want what it is, use url.match() and wrap the protocol portion in parentheses:

url.match(/^([a-z0-9]+):\/\//)[1] // https

Here is a runnable example with a few example URLs.

const urls = ['file://test.com', 'http://test.com', 'https://test.com', 'example.com?http'];

console.log(
  urls.map(url => (url.match(/^([a-z0-9]+):\/\//) || [])[1])
);

answered May 2, 2017 at 16:02

samanime

26.8k17 gold badges99 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

styfle · Accepted Answer · 2017-05-02 16:00:02Z

3

You could use the URL API which is supported in most browsers.

function getProtocol(str) {
    try {
        var u = new URL(str);
        return u.protocol.slice(0, -1);
    } catch (e) {
        return '';
    }
}

Usage

getProtocol('example.com?url=http://www.eg.com'); // returns ""
getProtocol('https://example.com?url=http://www.eg.com'); // returns "https"

answered May 2, 2017 at 16:00

styfle

25k30 gold badges93 silver badges142 bronze badges

4 Comments

user564927 Over a year ago

Well thats true, but what if I give you a string: 'http:/www.example.com', this should not be returning me "http" either

styfle Over a year ago

@user564927 Interesting. The single slash appears to act the same way in Chrome, Firefox, and Edge. In fact, no slashes works too http:www.example.com

styfle Over a year ago

@user564927 Upon further investigation, it looks like a single slash is completely valid, but technically has a different meaning than a double slash. Most browsers treat single slash as user error and correct to double slash.

sleighty Sep 12 at 4:19

This doesn't work with an invalid URL. For instance, the protocol is present int https://@a@ but getProtocol would return ''. The regex approach might be better depending on the application's needs.

Nikhil Sinha · Accepted Answer · 2024-05-20 08:08:21Z

0

You can first use validator.js to check whether the string is a valid url with a protocol. Then use JavaScript's built-in URL api to get the protocol from the url.

Let's say that the string you need to check is in the str variable.

import validator from "validator"

// Use validator.js to check if the string is a url with a protocol
const isValidUrlWithProtocol = validator.isURL(str, { require_protocol: true })
// isValidUrlWithProtocol will be true for http://example.com (or https), not example.com

const protocol = isValidUrlWithProtocol ? new URL(str).protocol : ""
// If isValidUrlWithProtocol is true, protocol will be "http:" (or "https:")

answered May 20, 2024 at 8:08

Nikhil Sinha

1,13113 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to check if url scheme is present in a url string javascript

3 Answers 3

Comments

Usage

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Usage

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related