Using Javascript, verify if a given URL is legitimate and commences with "http://" or "https://"

Question

Using Javascript, verify if a given URL is legitimate and commences with "http://" or "https://"

I need to validate the authenticity of my URLs, ensuring they begin with either http:// or https://.

Here is the regular expression (RegExp) I have been using:

private testIfValidURL(str) {
    const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
    return !!pattern.test(str);
  }

Although this function works in most cases, there is one exception:

For a URL to be considered valid, it must always begin with http:// or https://. However, my current function validates URLs like www.abcd.com, which is not ideal for me.

Any suggestions?

javascript regex

Answer 1

Answer №1

If you change ^(https?:\\/\\/)?' to ^(https?:\\/\\/), the pattern will match exactly one occurrence because the ? makes the preceding item optional, allowing zero or one occurrences. In this case, you only want one occurrence so the ? should be removed.

According to regular-expressions:

? - Makes the preceding item optional. It is greedy, so it includes the optional item in the match if possible.

Answer 2

If you change ^(https?:\\/\\/)?' to ^(https?:\\/\\/), the pattern will match exactly one occurrence because the ? makes the preceding item optional, allowing zero or one occurrences. In this case, you only want one occurrence so the ? should be removed.

According to regular-expressions:

? - Makes the preceding item optional. It is greedy, so it includes the optional item in the match if possible.

Answer 3

Answer №2

To make it mandatory to have a http or https sequence first, simply remove the "(...)?".

function checkURLValidity(input) {
  const pattern = new RegExp('^https?:\\/\\/' + // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
    '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator

  return !!pattern.test(input);
}

console.log(checkURLValidity('www.abcd.com'));
console.log(checkURLValidity('http://www.abcd.com'));
console.log(checkURLValidity('https://www.abcd.com'));
console.log(checkURLValidity('htt://www.abcd.com'));

Answer 4

To make it mandatory to have a http or https sequence first, simply remove the "(...)?".

function checkURLValidity(input) {
  const pattern = new RegExp('^https?:\\/\\/' + // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
    '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator

  return !!pattern.test(input);
}

console.log(checkURLValidity('www.abcd.com'));
console.log(checkURLValidity('http://www.abcd.com'));
console.log(checkURLValidity('https://www.abcd.com'));
console.log(checkURLValidity('htt://www.abcd.com'));

Using Javascript, verify if a given URL is legitimate and commences with "http://" or "https://"

Answer №1

Answer №2

Similar questions

Maintaining hot reload functionality by sharing components between two projects

Dealing with incorrect routes found in both documents

What is the best way to utilize useEffect solely when the length of an array has

Ways to style a div element in CSS to achieve a unique shape

What could be the reason why the Google Maps API fails to load on Firefox?

Unable to display tags with /xoxco/jQuery-Tags-Input

Attempting to output numerical values using Jquery, however instead of integer values, I am met with [Object object]

Developing an interactive menu for mobile devices utilizing a combination of JSON, HTML, JavaScript, and CSS

Calculating the product of two input fields and storing the result in a third input field using a for loop

What is the best way to navigate through multi-dimensional arrays of objects in JavaScript?

Adjustable height for text input field

php$insert new field into mysql table using form insertcell

Is there a more effective approach to managing an array of objects retrieved from an API call?

Issues with Datepicker functionality in Bootstrap 5 are causing it to malfunction or not display

Storing the information received from an API as an HTML element

How does the Express server collaborate with Webpack middlewares to facilitate live reloading?

Issues with Videojs Responsive Lightbox Functionality

Creating dynamic select boxes in Django Admin using jQuery

How to use plain JavaScript to extract the value from a textarea in GWT

JavaScript array displaying excess whitespace in its presentation