Grabbing a slug from a URL using JavaScript

Question

Grabbing a slug from a URL using JavaScript

I have examples of different URLs.

Now, I aim to extract specific strings from these URLs.

'about'
'product'
'learn'

I've attempted this using Next.js.

import { useRouter } from 'next/router'

const { asPath } = useRouter()

const result = asPath.substring(1).split('?')[0].split('#')[0].split('/')[0]

Is there a more efficient approach, such as utilizing RegEx or other techniques?

Additionally, I am interested in achieving the following outcomes:

'about' or ['about']
'product/roller' or ['product','roller']
'learn/goin' or ['learn','goin']

Is that feasible?

javascript regex next.js

Answer 1

Answer №1

To create a new object for the URL, you can utilize the pathname and extract characters that are not slashes

let slug = url => new URL(url).pathname.match(/[^\/]+/g)

console.log(slug('https://example.com/about?hl=en#iron'))
console.log(slug('https://example.com/product/roller/?hl=en&lo=true'))
console.log(slug('https://example.com/learn/goin/?hl=en&lo=true#iron'))

An alternative method without using regex is

.pathname.split('/').filter(Boolean)

Answer 2

To create a new object for the URL, you can utilize the pathname and extract characters that are not slashes

let slug = url => new URL(url).pathname.match(/[^\/]+/g)

console.log(slug('https://example.com/about?hl=en#iron'))
console.log(slug('https://example.com/product/roller/?hl=en&lo=true'))
console.log(slug('https://example.com/learn/goin/?hl=en&lo=true#iron'))

An alternative method without using regex is

.pathname.split('/').filter(Boolean)

Answer 3

Answer №2

Extracting the directory path from the URL using JavaScript: location.pathname.split('/').slice(1);

Learn more about the Location pathname property on MDN

Answer 4

Extracting the directory path from the URL using JavaScript: location.pathname.split('/').slice(1);

Learn more about the Location pathname property on MDN

Answer 5

Answer №3

Even though the question is not about URLs, it's worth noting that the URLs you're using consist of parameters. These parameters should be retrieved using URLSearchParams or searchParams:

let params = (new URL(document.location)).searchParams;
let hl = params.get('hl');
let lo = params.get('lo');

Please refer to MDN documentation for more information.

Answer 6

Even though the question is not about URLs, it's worth noting that the URLs you're using consist of parameters. These parameters should be retrieved using URLSearchParams or searchParams:

let params = (new URL(document.location)).searchParams;
let hl = params.get('hl');
let lo = params.get('lo');

Please refer to MDN documentation for more information.

Grabbing a slug from a URL using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Only when all the AJAX scripts have finished executing should you refresh the page

AngularJS - Refreshing Controller when Route Changes

What is the best way to transfer an item from one object to another within the same array using javascript?

Learn how to trigger a re-render in React to update a value stored in local storage

Automatic line breaks within a JavaScript code can be achieved by using

Clerk Bug: The UserResource type returned by useUser() does not match the @clerk/types

Creating a collapsible sidebar feature in Angular 2

Utilizing AngularJS for Showcasing JSON Information Using Ng-Repeat and Ng-Factory

What sets apart !$scope.variableName from $scope.variableName in AngularJS?

Updating the progress bar without the need to refresh the entire page is

As I attempt to connect with the bitcoin average server, I encounter a 403 status code error in the communication

How to bind array elements in Vue.js

The direction to the Excel document for conversion into JSON

Prevent user input in Vue.js until the value has been modified

Tips on organizing and designing buttons within a canvas

Extract an array from a JSON array based on the lowest value of the keys

Is there a way to stop "window.location.replace()" from being replaced or overridden?

Is it considered acceptable to utilize a v-model's value as the basis for an if-statement?

Handling multiple render calls and rerenders in React function components with setTimeout (best practice for firing multiple times)

Automatically send users to the login page upon page load if they are not authenticated using Nuxt and Firebase