HTML force URL hyperlink to be treated as non-relative (absolute)

Question

I have a list of URLs that our users have entered for websites of various clients... I am loading this list from the server into a grid for the users to see... I made the URLs clickable by wrapping them with a href HTML tag... the problem is, sometimes the user enters urls without the http:// or www. prefix and so the browser treats them as relative URLs which are never ever the case because all these websites are for our clients and they are all external. Is there a way to force these URLs to be treated as absolute instead of relative?

Here is an example:

<a target='_blank' href='google.com'>google.com</a>

If you try this, you'll see that the browser will assume it is a relative path which shouldn't be the case.

Thanks

---

Solution:

I've chosen to check for '//' (because I don't know what the protocol is - could be http or https) and if not found, I assume it is an http website and I prefix the URL with that - so in short no way to force the browser to treat the hyperlinks as absolute

Solution 1

Why don't you preprocess the input and append http:// when necessary?

Solution 2

You can add // before the url and it should work.

Like: //stackoverflow.com

Solution 3

It is a relative URI.

If you want to link to http://google.com/ then that is where you need to link to.

You can either moderate the URIs you are wrapping, or try to algorithmically guess if it was intended to be a relative link or not.

Note that you cannot safely assume that there should be a www. since the use of that for websites is just a convention, and no longer a strongly followed one.

Comments

[elvenbyte]

I know this is a very old question, but I found it looking for another one, and I think I can put a brick on it. Have you considered javascript? What about "location.href"?

[Ayyoudy]

I could... but there are many variations to handle, lots of URLs and sometimes they have www. sometimes they don't and have other subdomains, etc... not as clean as you'd think... I was hoping for a cleaner way

[Navneeth G]

adding just http:// would work, this seems to be a clean one as long as you don't expect them to switch protocols like ftp etc...

[Navneeth G]

exactly, that is what is meant by "preprocess". Do a simple string search with "http://", and if the returned index is 0, you don't have to append it!

[Ayyoudy]

Well I guess I was hoping that there is a way to force the browser to treat the URls as absolute. That was my question really (see last line in my original question). I wasn't asking how to convert a relative URL to an absolute one because that's trivial. I was hoping that there was a way to make the browser realize that you want it to treat the hyperlink as relative regardless of its detection.

[Ayyoudy]

No worries, thanks for the help. I've accepted your answer because I don't think there is a way

[Geoffrey Hale]

assurePrefix(url) { return url.match(/^.{3,5}\:\/\//) ? url : `http://${url}` }

[Pedro Coelho]

Geoffrey saved the day. Should be the best answer

[Corné]

This is a better solution than the accepted answer - Thanks.

[michal.jakubeczy]

Beware, this uses the same prefix like your site has. If your site runs on http:// it will open http://stackoverflow.com ... if it has https:// it will open https://stackoverflow.com. For some website which do not implement https or do not redirect from http to https it might be a problem.