Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Regular Expression To Make Sure All The Words In A String Only Have Letters

I’m coding a To-Do List in Visual Studio Code and I want to make sure all the items I add to the To-Do List are viable and don’t have numbers. I’m fine with having a one word item but I also need it to check more than one word items for numbers. The regex expression I’ve been running unsuccessfully is:

const pattern = /\b[a-zA-Z]{0,}\b/;

I am new to Javascript and I don’t understand regular expressions anymore than the most basic components. Help is much needed 🙂

Here is the HTML code:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<div class="container">

        <header class="text-center text-light my-4">

            <h1 class="mb-4">Todo List</h1>

            <form class="search">

                <input class="form-control m-auto" type="text" name="search" placeholder="search todos" />
        
            </form>

        </header>

      <ul class="list-group todos mx-auto text-light">

          <li class="list-group-item d-flex justify-content-between align-items-center">
              
              <span>Take out trash</span>
          
              <i class="far fa-trash-alt delete"></i>
        
          </li>

          <li class="list-group-item d-flex justify-content-between align-items-center">
              
              <span>Vacuum</span>
          
              <i class="far fa-trash-alt delete"></i>
        
          </li>

          <li class="list-group-item d-flex justify-content-between align-items-center">
              
            <span>Homework</span>
        
            <i class="far fa-trash-alt delete"></i>
      
          </li>

      </ul>

      <form class="add text-center my-4">

          <label class="text-light">Add a new todo...</label>
          
          <input class="form-control m-auto" type="text" name="add"/>

      </form>

    </div>

Here is my Javascript code:


const pattern = /\b[a-zA-Z]{1,}\b/;

addForm.addEventListener('submit', e => {

    e.preventDefault();

    const todo = e.target.add.value.trim();

    if (pattern.test(todo)) {

        generateTemplate(todo);

        addForm.reset();

    }

});

P.S. I’ve been using Regex101 to test my expressions I hope this is ok.

I tried the regular expression:

/\b[a-zA-Z]{0,}\b/;

and expected for it to be able to test all the words and return false if there were numbers in any one of them. What resulted was it just matched one word without numbers in the String and called it a day. I need it to check every word. (I’m aware I could use a ForEach loop but a simple expression would be preferable.

>Solution :

For my answer, I’m running the regular expression in the input event handler. So that it cleans the input as the user types it in.

This replaces all non letters and spaces then replaces all multiple spaces in a row to clean it up.

e.target.value = e.target.value.replace(/[^a-zA-Z\s]/g,”).replace(/ +/g, ‘ ‘)

let inputField = document.querySelector("[name='add']");

inputField.addEventListener("input",(e) => {
   e.target.value = e.target.value.replace(/[^a-zA-Z\s]/g,'').replace(/ +/g, ' ')
});
<input class="form-control m-auto" type="text" name="add"/>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading