Learning About Regular Expressions


by Jeremy Caudle
code

Regular expressions seemed a bit difficult in the past, but I think I have a better handle on them after doing a course on Treehouse about regular expressions in JavaScript. Form validation is the first thing that comes to mind, but there are lots of uses I’m not aware of yet.

Checking for numbers (0-9) within text with Regular Expressions

View the code:

HTML and JS 
<div class="code-block">

            <h2>Checking for numbers (0-9) within text with Regular Expressions</h2>
            <label for="input-text">Enter in text that includes numbers.</label>
            <input id="input-text" type="text">
            <button id="button-numbers">Check for numbers</button>

            <p id="js-status-message" class="status-message"></p>

        </div>
        
        <script>

            // ---------        
            // Variables
            // ---------
            const inputTextField = document.getElementById('input-text');
            let inputText = '';
            const buttonNumbers = document.getElementById('button-numbers');
            const messageStatus = document.getElementById('js-status-message');

            // ---------
            // Functions
            // ---------
            
            function checkText() {
                inputText = inputTextField.value;
                const regex = /\d{1,}/;
                const inputTextEval = regex.test(inputText);
                console.log(inputTextEval);
                if(inputTextEval) {
                    messageStatus.style.display = "block";
                    messageStatus.innerText = 'The text contains numbers!';
                    buttonNumbers.setAttribute('disabled','');
                    buttonNumbers.innerText = 'Good job!';
                } else {
                    messageStatus.style.display = "block";
                    messageStatus.innerText = 'The text you entered does not contain any numbers. Try again.';
                }
            };

            // ---------        
            // Events
            // ---------
            
            buttonNumbers.addEventListener('click', checkText);


        </script>
CSS 
.code-block {
                border-radius: 1rem;
                max-width: 20em;
                margin: 1rem auto;
                padding: 1rem;
                background-color: skyblue;
                font-family: Helvetica, Arial, sans-serif;
                line-height: 1.25;
            }

            .code-block h2 {
                font-size: 1.25rem;
                text-align: center;
            }

            .code-block label, .code-block input, .code-block button {
                text-align: center;
                display: block;
                width: 100%;
                max-width: 20em;
                margin: .5rem auto;
            }

            .code-block button {
                margin: 1rem auto;
                min-height: 44px;
                border-radius: .5rem;
                border: none;
                background-color: #fff;
            }

            .status-message {
                display:none;
                border: dotted 2px #000;
                border-radius: 1rem;
                padding: .5rem;
                text-align: center;
            }

Tags