Live site | GitHub | Original Post

So quite a few people in the original thread asked for the source code to this game. I’m fairly new to and slow at gitHub but I’ve got round to uploading it to there and here’s the most relevant part anyway, I’ve commented to help teach a little. It should be useful for beginners to learn but I think Unicode RegEx is quite an obscure topic so even the more experienced might get something out of it.

function checkpass(t){ //t password input as a string

// we'll use t = '👨🏾‍🍳pÂs👩🏿‍🦳' as our example string

//complex unicode characters are made up of the basic elements and modifiers
//for example: Â has the base A and the ◌̂  that modifies it.

const au =t.split(''); 
//this basic split function. splits the string into an array of unicode characters and modifiers
//example output: ["ud83d","udc68","ud83c","udffe","‍","ud83c","udf73","p","A","̂","s","ud83d","udc69","ud83c","udfff","‍","ud83e","uddb3"]
//5 characters turn into 18

 const a = [...t];
  //this es6 version does slightly better but still can't manage complex emojis
 //["👨","🏾","‍","🍳","p","A","̂","s","👩","🏿","‍","🦳" ] length 12
// black chef becomes: man, black skin, frying pan

 const abest= Lsplit(t, '');
 //this 3rd party library is the best I could find but still struggles to split some emojis
 //[ "👨🏾‍🍳", "p", "Â", "s", "👩🏿‍", "🦳" ] length 6


 const ar = abest.reverse();
 let lowcount=0; //lower case
 let letcount=0; //all letters

//regular expressions or regex are a way to search through text
// /A/ matches a capital A. [a-z] matches all lower case letters

a.forEach(e=>{ if(e.match(/[a-z]/)){ lowcount++;}});
a.forEach(e=>{ if(e.match(/[a-zA-Z]/)){ letcount++;}});

ana.logEvent('sign in clicked'); //google analytics
if(a.length<6){return 'Your password must be at least 6 characters long'}
if(a.length>255){return 'Your password cannot be longer than 255 characters'}
if(t.match(/s/u)){return 'Your password cannot contain spaces'}
// in reg ex some letters have special functions when escaped with a backslash. s means white space
if(lowcount <1){return 'Your password must contain a lower case letter'}
if(!t.match(/d/u)){return 'Your password must contain a number'} //notice ! for if no number matches
if(!t.match(/[A-Z]/u)){return 'Your password must contain a capital letter'}
ana.logEvent('symbol reached'); //google analytics
if(!t.match(/[^a-zA-Z0-9]/u)){return 'Your password must contain a symbol'}
// here ^ acts like the regex not ! symbol
if(t.match(/I/u)){return 'Your password cannot contain a capital I'}
if(t.match(/A/u)){return 'Your password cannot contain a capital A'}
if(a.length<10){return 'Your password must be at least 10 characters long'}
if(t.match(/(.)1/u)){return 'Your password cannot contain two identical characters in a row'}
//the dot . means a match for any character
//brackets () means a group 
// an escaped number 1 refers to that group. 
//so this expression says any letter can be the first character and then if the following character is the same match it
if(ar.length>43){return 'Your password cannot be longer than 43 characters'}
if(top1000.find(e=>t.includes(e)) !==undefined){return 'Your password cannot contain a common password'}
if(letcount <8 ){return 'Your password must contain at least 8 letters'}
if(!t.match(/[u0370-u03FF]/u)){return 'Your password must contain a greek letter'}
//unicode has a series of character blocks. The range here is all the greek letters
//notice the /u, this means match unicode characters
ana.logEvent('greek letter completed'); //google analytics
if(!t.match(/[🌍-🛌🏿]/u)){return 'Your password must contain an emoji'}
//this doesn't actually include all emojis because they are spaced out throughout unicode
ana.logEvent('emoji completed');
if(!t.match(/8675309/u)){return 'Your password needs Jenny's number'}
ana.logEvent('jenny completed');
if(au.includes('uddb1')){return 'Your emojis cannot have curly hair'}
if(au.includes('uddb0')){return 'Your emojis cannot have ginger hair'}
if(au.includes('uddb3')){return 'Your emojis cannot have white hair'}
//The au variable is the array of word split completely into unicode characters and modifiers 
//this means the hair colour modifier is split from the single emoji character and can be checked

if(au.join('') !== ar.join('') ){return 'Your password must be a palindrome'}
//because this relies on exact splitting our example won't actually work
 //[ "👨🏾‍🍳", "p", "Â", "s", "👩🏿‍", "🦳" ]
 // reversed: ["👩🏿‍", "🦳", "s", "Â", "p", "👨🏾‍🍳"]
 ana.logEvent('palindrome completed');

let numOr0 = n => isNaN(n) ? 0 : parseInt(n);
if(t.match(/[A-Z](?=(.{0,2}[A-Z]))/u)){return 'Capital letters cannot be anywhere near eachother'}
// ?= means after the matched letter
// {0,2} means you can have between 0 and 2 of the letter before. Here it's a dot, so it could be any letter.
//followed by [A-Z] any capital letter. So it matches any capital letters with 2 or less of characters between them.
//there is also a match before regex you shouldn't use because it breaks your code on iphones
//a simpler way of doing this might be /[A-Z].{0,2}[A-Z]/
ana.logEvent('capital space completed');
if(a.reduce((d, b) => numOr0(d) + numOr0(b),0) !==100){return 'All the digits in your password must add to 100'}
ana.logEvent('sum100 complete');
if(!t.match(/42/u)){return 'Your password must contain the meaning of life'}
if(lowcount !==1 ){return 'Your password cannot contain more than one lower case letter'}
if(!au.includes('udfff')|| !au.includes('udffe')||!au.includes('udffd')||!au.includes('udffc')||!au.includes('udffb'))
{return 'Your emojis aren't diverse enough'}
//this works the same way as hair colour but checks for one of each skin colour.

ana.logEvent('diverse complete');
if(!t.match(/𰻝/u)){return 'Your password must contain shaanxi noodles'}
//some unicode characters are so rare they don't seem to render anytngi other than a blank box
//on any devices, but that sqaure still holds the correct unicode.

return 'checking password'

And for those of you interested in some analytics. Here’s how people did.

r/webdev - The source code from my password puzzle game - useful for learning RegEx.

Source link

Write A Comment