How to validate part of a URL strictly contain alphanumeric characters?

Question

Hello SoloLearners,

I'm working on SoloLearn code bit link converter.

https://code.sololearn.com/WKyKXwCg9i1I/?ref=app

The idea came when I started to notice that SoloLearn app and web users now have a different scheme of code bit links. App users cannot directly open a code bit whose link was shared from SoloLearn web, vice versa ~ possibly.

Now on to the question. I noticed that code bit link unique ID is 12 characters long, contains mostly alphanumeric, no space nor special character (or I just haven't seen any). I need help with the validation of the URL (code bit link), mainly to check and require the unique ID to contain alphanumeric.

At the moment, the code accepts URL that contains only numbers, or only characters as its unique ID. That's not the desired behaviour, however.

Thank you for any guides, insights and suggestions, in advance 🙏

Answer 1

I was working full time with all sorts of companies (3 corporate giants, a startup, a crypto company) and was traveling a lot across India due to that.

Few months back, I started working with a super cool company in Bengaluru which is providing me some work life balance so here I am back to the roots. 🙂

thanks lpang, it was so good to see old friends online. 😊

That regex took me some time too.
It's basically using the look ahead syntax to impose && condition.

(?=.*( 1st condition))(?=.*( 2nd condition))(?=.*( 3rd condition))

Answer 2

Hey lpang,

Good to see you my old friend.😃

I guess this is what you are looking for to do strict checking for 12 characters alphanumeric.

Checkout the regex editor with test cases.
https://regex101.com/r/UkCs7A/1

And here's the secret regex recipe😉
/(?=.*(^[a-zA-Z0-9]{12}$))(?=.*([a-zA-Z]{1,}))(?=.*([0-9]{1,}))/gm

Anyone seeking the godly powers of Regex can refer this resource 👇 I created 3 years ago.

https://neetishop.medium.com/best-learning-path-to-master-regex-for-javascript-developers-d928960a9d14

Answer 3

Morpheus
It's been too long since I see you around, where you've been buddy?

Thank you for the regex example, and the medium link. I honestly admit am still struggling with the use of that weapon, don't know how people could get it easily.

It's good to see you back man! 🤗

Answer 4

Your refex is then wrong, now you check does it contain lower case letter, upper case letter or number, repeated 12 times.

If you wanna make sure that your test string have at least one of each group, regex should be different.
Now it test for any of it so if all are numbers, or all are lower case, or all are upper case, will also pass test.

I suggest you use string.lenght method to test for lenght, not regex. And do this test before, so if it does not have right length, show user some notification, and skip refex test.

Answer 5

I found this:
https://www.sololearn.com/compiler-playground/cnfGEnsULrcA/#cpp
https://code.sololearn.com/cnfGEnsULrcA/?ref=app

Old yes, but still the top trending code.
Note that the id is all alphabet

You can use isNaN to guard against an id made of numbers only.

Answer 6

Here is more feedback:
Now your app test when user paste link, if i edit this link, nothing will change, so I need to copy link and paste it again, this is bad for UX, add some button to start it. You can also keep this logic for paste, I like it, and most users will use it in that way. But somehow handle case when user edit input.
You can also disable input fields, so user will know he can't type or edit, and if he need again he know he need to reset.

Also when user clear first input, you can automatically clear second, now we need to click at restart button. If you disable input you don't need this.

This was some idea how you can improve app.

Answer 7

ODLNT
Interesting findings! and all these times I thought the 12 characters was randomly generated for uniqueness reason without meaning :D

Answer 8

Thanks for stopping by Mirielle

No, it's not fixed yet.

The code is accepting and processing URL pasted in, even if it contain invalid link unique ID. It's not right ...

Let's take the attached code bit URL for example ...

https://code.sololearn.com/WKyKXwCg9i1I/?ref=app

The unique ID is "WKyKXwCg9i1I" an alphanumeric string, with variation in alphabet letter case.

The problem with the code is, it accepts URL with invalid unique ID, like "123423453456" - all digits, or "abcdbcdecdef" - all alphabets.

I need help to check & require a pasted link to have a valid format - 12 characters length, alphanumerics.

Ideally the code should refuse invalid URL and don't bother converting it app <--> web

Answer 9

ODLNT
Thanks bro, but all-alpha or all-digit is indeed a rare case, though not impossible as I see it now,

I guess I'll change my approach to extract the unique ID first, check its length before merging the prefix / suffix.

Answer 10

Mirielle
Thanks a bunch, I think every() might help, I just thought I could've done it with just regex : )

Answer 11

Ipang indeed, all-alphabet is rare and happens from time to time.

https://www.sololearn.com/compiler-playground/cPndYbrLdOHr/#cs
https://code.sololearn.com/cPndYbrLdOHr
Done ten months ago.

All-digit on the hand I have never seen, this may be because it appears every code ID starts with an alphabet, "W", "w", or "c".

Answer 12

PanicS
Thanks a lot, well I admit regex isn't too easy for me still. I'll do length check first then run the regex when length test pass. I just found it online and it said the number inside the curly bracket indicates length, so I went on to try it ...

I kinda disagree on your statement about clipboard paste vs manual edit of the URL though. There is a reason why I chose the clipboard paste approach, there's less typo possibility, rather than having the user to type the URL in by hand, and have them go back and forth to check whether what they type was correct.

And for the case of computer generated unique ID like the one for code bit links, it is better to copy & paste link URL because one mistyped letter or a different case of alphabet can make a difference.

The idea of disabling both inputs and clearing the converted link textbox is noted as TODOs when my head gets a bit clearer : )

Answer 13

ODLNT
Are you suggesting I should make the code refuse all-digit unique ID or ... didn't clearly get your last note ...

Answer 14

Ipang,
I am not suggesting that you make the code refuse all-digit unique ID.

What I'm saying is to date, all of the code IDs I have seen have started with an alphabet, it appears the first character will be either "W"-web, "w"-PHP, or "c"-everything else.

If this is the case, you use it as part of your validation process.

Maybe some community members can help to confirm or refute my statement.

Mirielle, my bad, I saw the year 2022 and ran with it.

Answer 15

It's good to hear you find a job with work/life balance, such opportunity is just rather hard to find ever since the pandemic.

Anyways Morpheus, would you mind to add a bit of explanation with the regex example, I don't know about others, but for me it's rather overwhelming 😁

Woukd make a great added value for the post visitors I think ...

When you get the time to, of course ...

Answer 16

Basil
Thanks for the recommendation
Kindly share your thoughts and ideas about regex alternatives here, might do someone a favour, well at least for me : )

Answer 17

Basil
Good idea! I adopted the idea with some modification in the code now.

Thank you!

Answer 18

PanicS
I have tried to implement input handling following up on your feedback. Please do check and advice further. I can't disable both text input though, somehow text selection to copy, or text pasting isn't supported . Maybe it's my phone idk ...