URL validation RegEx in AngularJs using Javascript

I am looking for the following URLs to return as true

  • other.some.url
  • some.url
  • some.url/page/1

The following URL should be flagged as false

  • somerandomvalue

Here is the regex I have been experimenting with so far:

/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/
. I am currently using this within an Angular form input ng-pattern.

Any assistance on this matter would be greatly welcomed

Answer №1

Check out this recommended regular expression

/^((?:http:\/\/)|(?:https:\/\/))(www.)?((?:[a-z0-9]+.[a-z]{3})|(?:\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}(?::\d+)?))([/a-zA-Z0-9.]*)$/gm

function validateURL(input) {
    var result = input.match(/^((?:http:\/\/)|(?:https:\/\/))(www.)?((?:[a-z0-9]+\.[a-z]{3})|(?:\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}(?::\d+)?))([\/a-zA-Z0-9\.]*)$/gm);
    if(result == null)
        return false;
    else
        return true;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying foreign exchange rates using Shield UI Chart

In my quest to access and display forex data, I have stumbled upon the incredible Shield UI Chart. After some experimentation, I successfully mastered the art of implementing ajax: $.ajax({ url: 'http://api.apirates.com/jsonp/update', dataTy ...

Obtaining a specific item from a group using AngularJS. Utilizing a declarative method

Consider a scenario where you need to apply a CSS rule to a specific element within a collection that needs to be selected. <div ng-repeat="fragments" ng-click="makeSelected()"></div> $scope.fragments = [ {id: 6379, someProperty: "someValu ...

$http({method}) is malfunctioning while $http.get is functioning properly

Issue Description: While working on my project, I encountered an issue where using $http({ method : 'GET', url : data : ..... param works fine for both GET and POST requests. However, when the same method is used in JSFiddle, it blocks my reques ...

The concept of AngularJS bi-directional binding

Can a two-way binding be created between the parent scope and my directive's isolated scope without using my directive's attributes? The '=' sign establishes a two-way binding, but not in a direct way: it does not take the specified va ...

What is the best method to override the CSS transition effect with JavaScript?

I am trying to implement a CSS transition where I need to reset the width of my box in advance every time my function is called. Simply setting the width of the box to zero makes the element shrink with animation, but I want to reset it without any animati ...

Internal server error frequently occurs when there is an issue with Ajax requests in a Laravel application

Greetings, fellow developers! I am encountering an issue with the comments system in Laravel and Ajax. While it functions correctly with PHP alone, I am facing difficulties when using Ajax. The error message I am receiving is as follows: Status Code:50 ...

Create visual representations using a JSON structure that includes timestamps for various locations

I need to create a JavaScript graph based on a JSON dataset containing locations and timestamps. The data is structured like an array, and my goal is to visualize the time spent at each location with a comprehensive graph. ...

504 error when attempting to access HTTPS with Node.js

I have encountered an issue with making an https request in my backend node.js web app. The code I am using is as follows: const express = require('express'); const https = require('https'); const app = express(); app.get("/", functio ...

Schedule Picker

Looking to incorporate a calendar datepicker into my website. Is this achievable and if so, how can it be done? Here is an example: http://fullcalendar.io/js/fullcalendar-2.6.1/demos/agenda-views.html. Thank you. ...

Attempting to access a variable from outside the function

I am looking to pass the index variable from mapping to the event change function in my code snippet below: {this.data && this.data.map((item, index) => ( <tr className="table-info" key={index}> <td>{index}</ ...

Issue with VueJS 2 and TypeScript: computed value unable to recognize property specified in data object

When creating the following component: <template lang="html"> <div> <p>{{ bar }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; export const FooBar = Vue.ex ...

List/Array with dynamic ng-model bindings

After setting up a form containing an input text box with dynamically generated ng-model, the structure looks like this: <div class="row"> <div class="column">Tags:</div> <div class="column"> <sele ...

Typescript: Add a new variable preceding a specified string

fetchArticle(articleId: string): Observable<any> { return this._http.get(`${this._url}/${articleId}`) .map((response: Response) => response.json()) .do(value => console.log(value)) .catch((error) => Observable.throw(err ...

Are there any functions that work with an array of objects?

Is there a way to use includes function to check if an object is inside the array, as shown below: arr=[{name:'Dan',id:2}] When trying to check with includes like this: arr.includes({name:'Dan',id:2}) The result returned is false. I ...

Is there a maximum size limit for the Fabric.js Path Array?

Has anyone tried plotting a line graph using Fabric.js and encountered issues with the fabric.Path? I've noticed that it stops drawing after 8 segments even though I have attempted different methods like loops and individually coding each segment. co ...

HTML - one div's child element takes precedence over another div

My HTML page features two consecutive divs. The first div contains a child span that has a relative position, causing it to overlap the second div. I have implemented click events for both divs. However, when I click on the span that overlaps the second d ...

Use ajax, javascript, and php to insert information into a database

Issue at Hand: I am trying to extract the subject name from the admin and store it in the database. Following that, I aim to display the query result on the same webpage without refreshing it using Ajax. However, the current code is yielding incorrect outp ...

Ways to retrieve the content from a textfield

Is there a way to retrieve text from a textfield in material UI without using the onChange method? It just seems odd that I would need to constantly track the value with onChange in order to use it for any other purpose. I decided to search for solutions ...

Attempting to conceal a div element along with its contents using AngularJS

I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...

Viewify - displaying images in v-data-table cells reveals only a portion of the image

I have a challenge with displaying avatars for users in a table. The rows are too small and the images are getting cut off. https://i.sstatic.net/QjkHj.png Table: <v-data-table :headers="tableHeaders" :items="streamers"> <t ...