The compile error "Invalid regular expression" occurs when a regex pattern is not formatted correctly

I found a regex pattern on this website that I want to use in my Angular app.

To implement it, I copied the regex and enclosed it with two / characters...

websiteRegex = /?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'^(?:http(s)\(\)\*\+,;=.]+$/;

website: ['', [Validators.maxLength(250), Validators.pattern(this.websiteRegex)]]

This results in a compile error:

Module parse failed: Invalid regular expression: /?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'^(?:http(s)\(\)\*\+,;=.]+$/: Nothing to repeat

How should I go about resolving this issue?

regextypescriptcompiler-errorsangular6

Answer №1

The regex works perfectly when matched correctly...

linkValidator = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;

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

API Routes - xxxx has been resolved by the API without sending back a response, potentially causing delays in request processing

While working on my frontend project, I encountered an issue with a simple API call using API routes. Whenever I try to complete the call, I face the following error which prevents my redirect from working: API resolved without sending a response for /ap ...

typescriptnext.js

Utilizing the WebSocket readyState to showcase the connection status on the application header

I am currently in the process of developing a chat widget with svelte. I aim to indicate whether the websocket is connected or not by utilizing the websocket.readyState property, which has the following values: 0- Connecting, 1- Open, 2- Closing, 3- Close ...

javascripthtmlreactjstypescriptsvelte

When the page hosted on Vercel is reloaded, `getStaticProps` does not function as expected

I'm currently working on a nextjs project and running into an issue where one of the pages returns a 404 error when it's reloaded. Within the page directory, I am using getStaticProps. pages - blogs.tsx - blog/[slug].tsx - index.tsx ...

reactjstypescriptnext.jsvercel

JavaScript maintaining records and connections between multiple asynchronous events

I am working on an Angular 10 project where users can compress and upload images to Google Cloud Storage. The compression and uploading functionalities are functional, but I'm facing challenges with managing the asynchronous process of handling multip ...

javascriptangulartypescriptpromiserxjs

Transfer all the child nodes to the parent using the spread operator or Object.assign while preventing duplicate properties from being overwritten

I'm trying to transfer all the nodes of a child node to the parent using the spread operator or Object.assign (without relying on Lodash) while avoiding overwriting existing properties. My initial thought was to simply append the childArray to the ro ...

javascripttypescript

Creating a Typescript mixin function that accepts a generic type from the main class

I am working with the code snippet shown below: // Types found on https://stackoverflow.com/a/55468194 type Constructor<T = {}> = new (...args: any[]) => T; /* turns A | B | C into A & B & C */ type UnionToIntersection<U> = (U extend ...

typescriptgenericsmixins

Retrieving the value that is not currently selected in a mat-select component

In my mat-table, there is a mat-select component displayed like this: <mat-select multiple placeholder="{{element.name}}" [(value)]="selectedCol" (selectionChange)="selectionChange($event)" [disabled]="!selection.isSelected(element.id)"> & ...

angulartypescriptangular-material

Clearly define in typescript that a variable should not be null

Encountering an issue with typescript involving a mongoose model that is interface casted. import { Schema, model } from "mongoose"; interface IUser { userId: string guildId: string cash: number bank: number } const userSchema = ...

typescriptmongoosenull

Is there a way to determine the distance in miles and feet between various sets of latitude and longitude coordinates?

I am working with an array of latitude and longitude coordinates and I am looking to use JavaScript or Typescript to calculate the distance in miles and feet between these points. const latsLngs = [ { lat: 40.78340415946297, lng: -73.971427388 ...

javascriptangulartypescript

Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

I'm currently stuck on developing a function that takes a string as an argument and outputs an object with this string as a key. For example (using pseudo code): test('bar') => {bar: ...} I am facing difficulties in ensuring the correct ...

javascripttypescripttypescript-generics

What would be the counterpart of setLocale in Yup for the zod library?

How can I set default custom error messages for Zod validation? If I want to use i18n for error messages in Yup, I would do the following: import { t } from "i18next"; import * as yup from "yup"; import "./i18next"; yup.setL ...

javascripttypescriptyupzod

Tips for accessing touch events within the parent component's area in React Native

I implemented the code below in my React Native app to disable touch functionality on a specific child component. However, I encountered an issue where the touch event was not being detected within the area of the child component. How can I fix this prob ...

javascriptreactjstypescriptreact-native

Disable the functionality of the device's back button to prevent it from going back to the

For my project, I utilize popups to display important information to the user. When a popup is displayed, how can I override the functionality of the device's back button so that instead of navigating to the previous route, it will close the popup? ...

angulartypescriptback-button

Find a literal dollar sign in a PHP regular expression

It has been a while since I last used regex and now I am struggling to match an actual dollar symbol. Despite trying to escape it with \$ or $$, I still can't seem to get the desired result. Here's the text snippet: (WW) Capacity Charge . ...

phpregexpreg-match

Display the initial MUI components from an array of data in a distinctive manner

Trying to display the content of an Accordion by passing props down through a list array to a component. I have identified the issue but unsure how to call the component and pass the props differently. Below is the code snippet. Code for the parent compon ...

reactjstypescriptforeachmaterial-uiaccordion

Customized IntelliSense naming for overloaded parameters with conditional tuple types

In TypeScript 3.1, I have a generic function with arguments of either (TInput, string) or (string), depending on whether the generic's type parameter TInput extends undefined. To achieve this, I'm utilizing the new generic rest parameters feature ...

typescripttypescript-generics

Encountering Typescript errors when trying to destructure a forEach loop from the output of

There are different types categorized based on mimetypes that I am currently working with. export type MimeType = 'image' | 'application' | 'text'; export type ApplicationMimeType = '.pdf' | '.zip'; expor ...

javascripttypescripttypestypescript-typingstypescript-generics

Switch up the Angular base URL using ngx-translate

I successfully integrated ngx-translate into my Angular project. Now, I want to dynamically change the base href based on the language selected from the header menu. Currently, the URL appears as: "localhost:4200". However, upon launching the project, it ...

javascriptangulartypescript

Angular 5 - Reverting back to the previous state

In my Angular web application, I encounter a scenario where I need to navigate back to the previous state. Let's say I am currently on a page at http://localhost/someURL. On this particular page, users have the ability to search for items and see the ...

typescriptroutesangular5

Dealing with errors in Next.js 13 with middleware: a comprehensive guide

My attempt to manage exceptions in Next.js 13 using middleware is not producing the desired results. Below is my current code: import { NextRequest, NextFetchEvent, NextResponse } from "next/server" export function middleware(req: NextRequest, e ...

typescriptnext.jsnext.js13