Adjust regex for image URLs in JavaScript to handle unique and special cases

Does anyone have experience with using image URL regular expressions to validate images in forms with the ng-pattern directive?

I'm currently facing difficulties handling cases like https://google.com.png. Any assistance would be greatly appreciated.

Regular Expression:

'^((?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?)\.(png|jpg|jpeg|gif|PNG|JPG|JPEG|GIF)$'

For a better view, check out this link:

https://regex101.com/r/dH1wT6/1

javascriptangularjsregex

Answer №1

To simplify the regular expression:

^(?!mailto)(?:https?|ftp):\/(?:\/?(?:[.#@?=]?[a-z0-9\u00a1-\uffff]+)+)+[.]?(?:png|jpe?g|gif)$

In order to make the search not case-sensitive, you need to use the i flag.

It is important to check with your list of URLs to see if this regex allows too many or too few matches.

You can test it out here.

If you place the regex in a JavaScript string, remember to escape the backslashes.

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

Updating the material-ui checkbox state to reflect the checked, unchecked, or indeterminate status, can be achieved in reactjs without relying on state

I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...

javascripthtmlreactjscheckboxmaterial-ui

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Struggling to generate fresh vue components

Having trouble registering new components in my Vue app. I have successfully registered some components, but when I try to register a new one, I encounter the error: Unknown custom element: <store> - did you register the component correctly? For re ...

javascriptvue.jsvuejs2vue-component

Javascript for Cordova utilizing WebSocket and incorporating client side certificates

I am looking to establish a secure SSL/TLS connection between my client and server, with only a specific authorized client allowed to connect. To achieve this, I have generated a client certificate using OpenSSL on the server for mutual authorization. The ...

javascriptcordovasslwebsocketwss

Creating an animated sidebar that moves at a different speed than the rest of the

I have a layout with a large sidebar and small content, where the "Fixed part" refers to sticky positioning. I'm attempting to achieve this using scrollTop, but the sidebar is causing some issues like this: The code should only be executed when the ...

javascriptjqueryhtmlcssfrontend

Add empty objects to an array using a push function following the Vue JS constructor function

During my learning journey with Vue JS, I encountered an issue while attempting to populate an array with objects using a constructor function and the push method. Surprisingly, in Vue JS, the push function inserts a blank object into the array instead of ...

javascriptvue.jsvuejs2

Troubleshooting issues with sending POST requests in node.js

I've been attempting to initiate a post request, but for some reason, it's not going through. Strangely, I'm not seeing any output in the console log of my browser. My node server.js is up and running on x.x.x.x:8000. I've connected it ...

phpjavascriptjquerynode.js

Unusual Outcome from Observable.interval() Combined with flatMap()

When attempting to chain Observable.interval() with .flatMap(), I encountered what seems to be unexpected behavior. Below is the code snippet I am using (with Angular 2): Observable.interval(1500) .scan((numArr:any[], curr:any, i:number) => { nu ...

angularjsrxjsobservable

Notify when the focus is solely on the text box

How can I display an alert only when the focus is on a text box? Currently, I am getting an alert whenever I skip the text box or click anywhere on the page. The alert even appears when I open a new tab. Is there a way to fix this issue? Thank you for your ...

javascriptjqueryhtmltextboxalert

The React hamburger menu triggers a re-render of child elements within the layout

I am currently working with React and Material UI v5. Within my layout, I have a menu component with children. Whenever I click on the menu, it triggers a refresh of the children components. I attempted to resolve this by encapsulating the child components ...

javascriptreactjsmaterial-uihamburger-menu

What causes a function loss when using the spread operator on window.localStorage?

I am attempting to enhance the window.localStorage object by adding custom methods and returning an object in the form of EnhancedStorageType, which includes extra members. Prior to using the spread operator, the storage.clear method is clearly defined... ...

javascripttypescript

Specify the versions of packages in your package.json file

My package.json file contains many dependencies with "*" as the version, which I have learned is not recommended. I want to update them all to their latest versions. Despite using npm-check-updates tool, it indicates that all packages are up-to-date. Can ...

javascriptnode.jsnpmnpm-install

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

Ways to verify the timeframe between two specific dates

Having two distinctive arrays: accomodation: [ { id: 1, name: "Senator Hotel Fnideq", address: "Route de Ceuta, 93100 Fnidek, Morocco", checkin: "September 1", fullCheckinDate: "2021-09-01", ...

javascriptarraysvue.jsobjectdayjs

Tips for organizing the router.js file in VueJs

With my router.js file currently reaching around 500 lines, I’m looking for a better way to structure it. { path: "/", component: () => import("./../src/views/dashboard/Dashboard.vue"), meta: { auth ...

javascriptvue.jsvue-router

Vue.js / Nginx / Node.js - Error 413: Payload Too Big

My frontend is built using Vue.js and is hosted on an nginx server in production. Here's a snippet of my nginx.conf configuration: server { listen 80; server_name localhost; root /usr/share ...

javascriptnode.jsexpressfile-uploadmulter

JavaScript - Sort an array containing mixed data types into separate arrays based on data

If I have an array such as a=[1,3,4,{roll:3},7,8,{roll:2},9], how can I split it into two arrays with the following elements: b=[1,3,4,7,8,9] c=[{roll:3},{roll:2}]. What is the best way to separate the contents of the array? ...

javascriptarraysangularjsnode.js

Transforming a regular expression from PHP to Python code

Looking to transition this PHP code into Python: $title_regex = "/<title>(.+)<\/title>/i"; preg_match_all($title_regex, $string, $title, PREG_PATTERN_ORDER); $url_title = $title[1]; // fetch description $tags = get_meta_tags($url); // f ...

phppythonregex

Generating arrays and datasets using the power of JavaScript and jQuery

Recently, I wrote a code to arrange points inside a table, and everything was working perfectly when I specified an arrayOfDivs: http://jsfiddle.net/u58k6/6 var arrayOfDivs = [({topPosition : 99, leftPosition: 100}),({topPosition : 150, leftPosition: 400} ...

javascriptjqueryarraysfunctionaddition

The reflight response received an unexpected HTTP status code of 500

Recently, I've been working on utilizing the Yelp Fusion API by making a simple ajax call. I started off by using the client_id and client_secret provided by Yelp to successfully obtain an access token through a 'POST' request in Postman, fo ...

javascriptjqueryhtmlajaxyelp