Appendix A - Examples

Password validation using a regular expression

A simple example of a password validation in JavaScript. The password is validated on every entered character. A regular expression is used to define the validation pattern.


<style>
.strong {color:green;}
.weak {color:red;}
</style>
<p>Enter a password.<br/>
   <small>
   The password must contain at least one number, one uppercase letter, one lowercase letter,
   one special character (!@#$%^&) and at least 8 characters.
   </small>
</p>
<form action="#" onSubmit="return false">
  <label>Password:
     <input type="password" required />
  </label>  
</form>
<p id="message" class="weak"></p>

<script>
'use strict';
const requirementPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}/; // a regular expression
const inputPasswordElm = document.querySelector('input[type="password"]');
const messageOutputElm = document.querySelector('#message');
let isOK = false;

inputPasswordElm.addEventListener('input', function(){
   isOK = requirementPattern.test(inputPasswordElm.value);
   if (isOK) {
      messageOutputElm.classList.remove("weak");
      messageOutputElm.classList.add("strong");
      messageOutputElm.textContent = "Password is strong.";
   } else {
      messageOutputElm.classList.remove("strong");
      messageOutputElm.classList.add("weak");
      messageOutputElm.textContent = "Password is too weak.";
   }
});
</script>

Result:

Enter a password.
The password must contain at least one number, one uppercase letter, one lowercase letter, one special character (!@#$%^&) and at least 8 characters.

Reverse a String

JavaScript does not provide a built-in reverse method to reverse a string ("Hello" ⇒ "olleH"). The Array.prototype does provide a reverse() method. This can be used to construct a string reverse function. How the next regular expression works is explained in Regular expressions and Unicode escape sequences.


function reverseString(str) {
   return str.match(/[^\p{M}\u{FE0F}\u{FE0E}\p{Emoji_Modifier}\p{Join_Control}][\u{FE0F}\u{FE0E}\p{Emoji_Modifier}]?/gu).reverse().join("");
}
console.log(reverseString("'Garçon' is French for boy👦🏿")); // logs: "👦🏿yob rof hcnerF si 'noçraG'"

Caution: Even this function is not entirely Unicode safe. It will not match combining diacritical marks and ligature sequences. It will not match extended emoji sequences of multiple Emoji/Emoji_Component code points as one combined character.

Next function messes up the emoji sequence with a skin tone modifier. The String.prototype.split() is used to divide the string into its separate characters, turned into array elements. The regex describes where each split should occur: right before any code point.


function reverseString(str) {
   return str.split(/(?=[^])/u).reverse().join("");
}
console.log(reverseString("'Garçon' is French for boy👦🏿")); // logs: "🏿👦yob rof hcnerF si 'noçraG'"

Instead of String.prototype.split() with a regex separator we can also use the Unicode-aware Array.from() method to create an array with each character as one element. Also this function is not safe for texts that contain emoji sequences.


function reverseString(str) {
   return Array.from(str).reverse().join("");
}
console.log(reverseString("'Garçon' is French for boy👦🏿")); // logs: "🏿👦yob rof hcnerF si 'noçraG'"

Next function is not safe for surrogate pairs, let alone for emoji sequences:


function reverseString(str) {
   let revStr = "";
   for (let i = str.length - 1; i >= 0; i--) {revStr += str[i];}
   return revStr;
}
console.log(reverseString("'Garçon' is French for boy👦🏿")); // logs: "􏰼𩠽yob rof hcnerF si 'noçraG'"