1

I'm currently developing a site in which a user can create a user area with a user directory created at registration such as myWebsite.com/user/myUserName

Now I've seen YouTube & TikTok (and presumably more) use an url like myWebsite.com/user/@myUserName (note the "@")

So my question is how do I read these? if a user visits myWebsite.com/user/@myUserName how do I read the @ data?

I've searched many SO questions and Google before asking this and can't seen to find answers. only for standard url params or hashtags but not @, help!

Glen Keybit
  • 296
  • 2
  • 15
  • 2
    Like [this](https://stackoverflow.com/a/19737890/9455573) ? – piferrari Jan 11 '23 at 19:37
  • How do you currently read the username from `myWebsite.com/user/myUserName`? – brombeer Jan 11 '23 at 19:53
  • @brombeer I don't need to read the current url data back since the url is already the correct directory, however if i wanted to use myWebsite.com/user/@myUserName the at part would have to be read and coverted (fprwarded ?) to myWebsite.com/user/myUserName would it not – Glen Keybit Jan 11 '23 at 19:56
  • So if a user visits `myWebsite.com/user/myUserName` you probably show information about the user with the username `myUserName`. How do you currently know that `myUserName` is the username the user wants to get information on? You mentioned "_the correct directory_", is `myUserName` a directory? – brombeer Jan 11 '23 at 20:05
  • @brombeer yes indeed, users get their own directory so myUserName dir would be created if you register with username myUserName (checks are done) – Glen Keybit Jan 11 '23 at 20:08
  • 1
    Wouldn't that result in an URL like `myWebsite.com/user/myUserName/` - slash at the end, since it's a folder? (Btw, that sounds like an oooooldschool way to do it, you might want to take a look at "rewriting"/ModRewrite, depending on what server you use - which would also solve your `@` problem) – brombeer Jan 11 '23 at 20:18

1 Answers1

2

Solution

You can use the window.location.pathname API to read the path name, parse it into an array and then filter out the only item that starts with an "@" character.

// take the entire path from the window and split them into an array with /
const paths = window.location.pathname.split('/')
// paths = ["","user","@myUserName"]

// pick out the first item in the array starting with an "@:
const userName = paths.find((item) => item.at(0) === "@")
// userName = "@myUserName"

Explanation

Firstly, you need to understand the structure of a URL https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL

Looking at your example, the user id should be part of the path. To get the entire path of /my-path/@user-id, you can use window.location.pathname (MDN reference).

From there on, you can parse the path to get the user id with JavaScript

Alternative Answer

Or you can just use Regex and capture anything that comes after "@"

const final = window.location.pathname.match("@.*").at(0)
// note: not a complete solution because it captures the other parts of the URL following the `/@username/` path
XingZhi Lim
  • 131
  • 2
  • 6