Need some assistance with regular expressions? Specifically, parsing a list of URLs?

How can I parse various URL structures that may include:

protocol://category
protocol://category/:id
protocol://category/:id#hash

For example:

protocol://feed > feed
protocol://blog/123 > feed, 123
protocol://video/123#ABC > feed, 123, ABC

The protocol:// segment is constant, while the other parts are dynamic. I am seeking a way to extract these elements into an array containing:

[1] category
[2] id (if available)
[3] hash (if available)

I currently have a regex pattern of

(?:protocol:\/\/)(\w+)(?:\/?(\w*)(?:(?:$|#)?(.+$))?)?
which appears to be functional, but I am open to suggestions for improvement.

I have been testing this in regex101

Answer №2

If I understand your request correctly, you can achieve this in JavaScript like so:

url.slice(7).split(/\/+|#/g);

The slice function removes the protocol segment as it may not be necessary for your purposes. It's important to note that this approach assumes the URL follows one of the three specified formats. Otherwise, you might encounter variations such as:

protocol://data/123   --->   ["data", "123"]
protocol://data/#123  --->   ["data", "", "123"]
protocol://data/456#  --->   ["data", "456", ""]
protocol:///data/789  --->   ["", "data", "789"]

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

What is the best way to confirm that a SQL pool has been successfully created in an Express JS?

Currently, I am in the process of developing a restful API using mysql and expressjs. Below is an example showcasing how I send requests to my database: server.js: const express = require('express'), bodyParser = require('body-parser&ap ...

Is there a way to automatically update the input value when I refresh the page following a click event?

Currently, I have multiple p elements that trigger the redo function upon being clicked. When a p element is clicked, the quest[q] template is loaded onto the .form div. These templates are essentially previously submitted forms that sent values to an obj ...

Steps to retrieve the initial PaginationToken when listing users in AWS Cognito using the AWS SDK for JavaScript

I need assistance with retrieving a list of matching users from a Cognito userpool using an ExpressJS API to verify if the username already exists. Here is the code snippet: listUserFromUserpool = async () => { var params = { UserPoolId: process.env.U ...

core.js encountered an issue at line 6210: TypeError - The function this.service.addDepartment does not exist

Whenever I attempt to click the 'Add' button on a web application that I'm constructing, an error pops up. core.js:6210 ERROR TypeError: this.service.addDepartment is not a function at AddEditDepComponent.addDepartment (add-edit-dep.componen ...

A modern web application featuring a dynamic file treeview interface powered by ajax and php technology

Currently, I am developing a web-based document management system that operates as a single page using an ajax/php connection. The code snippet below shows how I display folders and files in a file tree view: if (isset($_GET['displayFolderAndFiles&apo ...

Guide on how to restrict specific days and dates in MUI React datepicker using a JSON array

I am working on a Laravel application that generates a JSON response containing dates and days of the week that need to be disabled in the datepicker. For instance, here is an example of my datesOff constant when I log it: ['2022-05-08', '2 ...

Error: The gulp-cssmin plugin encountered a TypeError because it attempted to read the property '0' of a null

I am attempting to condense my code, but I am encountering this error: D:\gulp-compiler\node_modules\gulp-cssmin\node_modules\clean-css\lib\selectors\extractor.js:66 return name.replace(/^\-\w+\-/, ...

Using JavaScript or JQuery, is there a way to retrieve the favicon icon, Apple-touch icon, and title of a webpage?

Is it possible to extract just the favicon icon and title from a webpage using only an IFrame? For example, for a site like www.stackoverflow.com, I want to retrieve only its title and favicon icon/Apple-touch-icon. Are there any plugins or parsers avail ...

Executing TipTap commands from a script tag in Vue 3: A step-by-step guide

One of the components I'm working with includes the following: <button @click="$refs.image.click(); editor.chain().focus().setImage({ src: state.image }).run()"></button> <input type="file" ref="image" sty ...

Check if jQuery condition is met for classes that match exactly

The PHP echo statement below contains the code. The brackets are empty, but I can guarantee that the statement inside, which modifies CSS, works - except for one issue. I want it to only target elements with a class attribute equal to "zoom" or "zoom firs ...

Issues with Vue Sortable functionality may be causing complications

Currently, I am utilizing vue-sortable and draggable. Although I am able to drag an item above and change its position, the JSON data does not refresh. Here is the existing list: <draggable v-model="this.$store.getters.getDocument.getDocumentAttributes ...

What is the best way to display a nested JSON object structure?

{ "Title": "Jurassic Park", "Year": "1993", "Rated": "PG-13", "Released": "11 Jun 1993", "Runtime": "127 min", "Genre": "Action, Adventure, Sci-Fi", "Director": "Steven Spielberg", "Writer": "Michael Crichton, David Koepp", "Actors": "Sam ...

Tips for getting a jQuery script to activate after dynamically adding DOM elements with Ajax

I have some knowledge about the "on" method, but many of the answers I've seen are not very specific. Can someone assist me with this code? $(function(){ var pagePositon = 0, sectionsSeclector = 'article#sector', $scrollItems = $( ...

The challenge of styling table borders with CSS

Can anyone help me with a problem I'm having while trying to create simple borders on a table? The border appears bold in the second row and last row, does anyone know why this is happening? https://i.sstatic.net/bCuhK.jpg Just a note: when I checke ...

What is the best way to create three distinct fractions in JavaScript that cannot be simplified?

I have a specific requirement to create 3 fractions with the following conditions: The denominator remains constant The numerator must be unique and fall within the range of 1 to three times the denominator The fraction should not be reducible (e.g., 2/6 ...

Navigational bar customization: Troubleshooting search button functionality

I've been encountering some challenges with the search form in bootstrap 4.1's navbar. I've been referring to this documentation link for assistance. The search form I have set up appears quite typical for bootstrap: https://i.sstatic.net/I ...

Organizing Files: Importing Sub-Components in Node.js

Here is my Node.js module/npm package structure: |- dist/ |- - requirejs/ |- - - [content in amd pattern ...] |- - node/ |- - - index.js |- - - submodules/ |- - - - submodule1.js |- - - - [submodule2.js and so on] |- package.json |- README.md I can easil ...

Guide on showcasing all entries in the database within the body section of an HTML table

Looking to showcase data from a table inside the body section of an html page This is the code I've been working on: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi ...

Steps for deactivating an eventhandler while another is being triggered:

There are two event listeners attached to a single input field. One triggers on change, while the other activates when selecting an autocomplete suggestion from Google. The issue arises when interacting with an autocompletion option as both handlers execut ...

JavaScript: Attempting to implement Highcharts without causing the browser to freeze

Is there a way to optimize loading multiple graphs without freezing the browser for too long? I want each graph to appear on the screen as soon as it's created, rather than waiting for all of them to finish rendering. I've tried using a similar ...