JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<p>
  <input placeholder="mm/yy">
  <span class="result"></span>
</p>

<p>
  <input placeholder="mm / yy">
  <span class="result"></span>
</p>

<p>
  <input placeholder="mm/yyyy">
  <span class="result"></span>
</p>

<p>
  <input placeholder="mm / yyyy">
  <span class="result"></span>
</p>

<p>
  <input placeholder="mm/aa">
  <span class="result"></span>
</p>

<p>
  <input placeholder="format like so: mm aaaa">
  <span class="result"></span>
</p>

<p>
  <input placeholder="mm/aaaa">
  <span class="result"></span>
</p>

<p>
  <input placeholder="MM-YYYY">
  <span class="result"></span>
</p>

<p>
  <input placeholder=" mm - aaa">
  <span class="result"></span>
</p>

<p>
  <input placeholder="mmm/a">
  <span class="result"></span>
</p>

<p>
  <input placeholder="mm/a">
  <span class="result"></span>
</p>

<p>
  <input placeholder="mm/aaa">
  <span class="result"></span>
</p>

JavaScript

// re1 = /^((?:[mM]{2}){1,2})(?:[\\-/\\\\]?)((?:[yYaA]{2}){1,2})$/;

let monthChars = "m";
let yearChars = "ya";

let reString = '(?:\\b|^)((?:[' + monthChars + ']{2}){1,2})(\\s?[\\-/\\\\]?\\s?)((?:[' + yearChars + ']{2}){1,2})(?:\\b|$)';
console.log(reString);
const re = new RegExp(reString, "i");

Array.from(document.querySelectorAll("p")).forEach(p => {
	let resultElem = p.querySelector(".result");
  let input = p.querySelector("input")
	let placeholder = input.placeholder;
  let results = re.exec(placeholder.trim());
  resultElem.textContent = results ? [
  	results[1],
  	results[2],
  	results[3],
   ].join("") : " no match ";
});