Mask for input web component?

Question

JavaScript

What is the best way to make a mask for a reusable input component in pure javascript?

one). Pass 2 attributes. One is a pattern, the other is a transcript to it. Pattern example: 11-11-22. Decryption example: 1 is [az]

2). Pass a pattern and a regular expression (each time you have to write a lot of logic for it

3). What are the other options?

Answer 1

If I understand the question correctly, then you decided to embrace the immensity: to make a universal mask for all occasions. I doubt that this will make your life easier, especially since there are already many fairly versatile and convenient ready-made solutions, but since you ask, you need it for some reason)
I would recommend using the first option with 2 attributes. The reason is the most natural and universal option. You will kill a lot of time for writing and debugging once, but then it will be enough to transfer the template and decryption. The second option involves constantly writing regular expressions, which makes the idea almost useless. The other options aren't much better either. For example, using a fixed set of control characters and classes - this will essentially reduce everything to the same writing of a regular expression manually, which is present in js natively)