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

The quickest method to modify the anchor element's class depending on the query string

Requirement - I aim to accomplish this task using only pure JavaScript without any additional libraries, although I am open to using one if necessary. I need to assign an extra class to anchor elements that contain a query string of 'xyz=negate' ...

javascriptjqueryhtml

Is it possible to time a page without relying on the Form tag?

As I search for solutions, I have come across some examples that require a Form tag, but unfortunately, it doesn't seem to integrate well with my current application. My goal is to implement a timer on a webpage that starts counting when one button i ...

javascriptc#asp.net

How do the scopes of a controller and a directive's controller differ from each other?

Can you explain the difference between a controller and a directive's controller in terms of scope? I'm struggling to grasp the distinction and whether it's necessary to create controllers within the DDO for my directives. In the code snipp ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Is it time to ditch daylight saving time - am I managing my dates and times correctly?

Currently, I am in the process of working on a PHP/mySQL web application where dates are stored as unix timestamps in columns that are UNSIGNED INT(10). When it comes to displaying these dates in the web view, we utilize moment.js to parse the numbers. On ...

javascriptdatabasedatabase-designdst

Guide to seamlessly integrating form data into MySQL using JavaScript and HTML without redirecting the user from the current page

Having trouble inserting a new user into MySQL database? I've attempted using both jQuery and pure JavaScript, but it doesn't seem to be working. There's no response when I click on the submit button. Any ideas on what might be causing this ...

javascriptajax

Issue with installing vscode-ripgrep during VSCode build/run process

After attempting to build and run VSCode on my Ubuntu 17.10 by following the instructions from this guide: https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run, I encountered an issue when installing dependencies using yarn. The error m ...

javascriptnode.jsnpmvisual-studio-code

Is my Angular controller making an excessive number of HTTP requests?

In my Angular controller, I have the following code: $scope.openCat = function(catId) { $http.get('/api/cat/' + catId). success(function(data) { $scope.sortedArticles = []; var lst = data.articles; lst.forEach ...

angularjsexpress

Utilizing a mouse-over script for image popup alignment

I recently came across the mouse over script below on a website, and I must say it works really well and is very easy to use. The only issue I have with it is the placement of the image. Currently, the image follows the cursor as it moves. Question: Is th ...

javascriptjqueryhtmlcss

JS: Decreasing the counter while calling the hide() function

If I have a standard count <?php echo "Today (".mysql_num_rows($query)."); ?> It will display as Today (10) if there are 10 entries. Beneath this counter is a while() loop that displays all the rows in a <tr>. Within each <td> in the ...

javascriptjquery

Using ng-repeat to asynchronously load background images from a specified URL

Imagine there is an API that retrieves a collection of blog posts, with each post having its own unique background image link. <article ng-style="{'background-image': 'url({{ post.meta.cover }})'}" ng-repeat="post in blog.listOfPost ...

angularjsasynchronousangularjs-ng-repeat

The server is currently pointing towards my local C drive directory instead of the desired message location

My goal is to create a functionality where, upon clicking the calculate button (without performing any calculations yet), the user will be redirected to a new screen displaying a response message that says "Thanks for posting that!". However, instead of th ...

javascripthtmlnode.jsexpress

Ways to provide input parameters to a method upon clicking an element without using the HTML onclick attribute

Is there a way to pass data between pages without redirecting to the next.php page every time a button is clicked? One suggestion is to remove the onclick attribute from the button: <button class="submit-btn"></button> and use this jQuery fu ...

javascriptphpjqueryajax

What is the best way to manipulate the canvas "camera" in HTML?

I am currently developing a 3D game that involves navigating through skyboxes. My goal is to have the camera respond to user input, specifically detecting key presses (using WASD controls) to move the camera accordingly. Do you have any suggestions on how ...

javascripthtmlcsshtml5-canvas

``motioning a component beneath another component that may be in a state

Having an issue with my CSS. I have some elements generated by JavaScript and when hovering over them, another element is displayed below the others for some reason. Here's the CSS related to this problem: .hiddenTextjob { display:none; ...

javascripthtmljquerycss

Text displayed in a pop-up when hovering

I'm in search of suggestions for creating a text pop-up that displays when the mouse hovers over specific text. After researching numerous websites, I haven't found exactly what I need. Currently, I have a table with headers at the top and I woul ...

c#javascriptjqueryhtmljquery-hover

Encountering a ReferenceError in React-Native with abcjs library: Element variable not found

import abcjs from 'abcjs'; export default class MusicScore extends Component { constructor(props) { super(props); this.state={ data: this.props.navigation.getParam('abctune'), } } render( ...

javascriptreactjsreact-nativeabcjs

What is the process for uploading an image using fetch?

After just starting to learn react, I decided to create a gallery App. However, I am facing an issue when trying to post pictures to the API. Whenever I click on the ADD button, nothing happens except for an error 500 being logged in the console. Below is ...

javascriptreactjspostfetch-api

The jQuery regex validation function fails to adequately validate the credit card input field

My form has multiple fields that need validation. To achieve this, I am using a customized version of jQuery Validation plugin as I want to incorporate Font-Awesome icons for indicating valid and invalid fields. It seems that with jQuery Validation, adding ...

jqueryregexvalidation

Invoke a function from a different vue.js component using the this.$refs property

I'm facing an issue with triggering a sibling element. What I've tried so far <b-img @click="callFileLoader"/> <b-file type="file" ref="fileUploader"></b-file> ... methods:{ callFileLoader () { this.$refs.fileUploader.c ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

What might be causing the attribute of this Backbone model to be undefined when attempting to access it?

I have a straightforward REST API that provides information about an item at /api/items/:id, which includes the ID and name. I am using a Router to organize my Backbone views. The edit route creates a FormEditItem view, passing the ID from the URL. To ret ...

javascriptrestbackbone.jsbackbone-viewsbackbone-model