Learn Regular Expressions by Building a Spam Filter - Step 21

JavaScript
1

Tell us what’s happening:

So I do not actually need help with this. I am wondering what is the purpose of putting the hundred, thousand etc in a capturing group if we do not want to capture it? Would this be for readability or is there a specific purpose this could serve? TIA

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Learn Regular Expressions by Building a Spam Filter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <header class="main-text">
      <h1 class="title">Is this Spam?</h1>
      <p class="description">
        Enter a phrase to check if it would be marked as spam or not.
      </p>
    </header>

    <main>
      <label class="message-label" for="message-input">Message: </label>
      <textarea
        placeholder="Enter message here"
        value=""
        type="text"
        name="message"
        id="message-input"
        rows="10"
        cols="40"
      ></textarea>
      <button class="btn" id="check-message-btn" type="button">
        Check message
      </button>
      <p id="result"></p>
    </main>

    <footer class="footer">&copy; freeCodeCamp</footer>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dark-grey: #1b1b32;
  --light-grey: #f5f6f7;
  --golden-yellow: #fecc4c;
  --yellow: #ffcc4c;
  --gold: #feac32;
  --orange: #ffac33;
  --dark-orange: #f89808;
}

body {
  background-color: var(--dark-grey);
  color: var(--light-grey);
}

body,
#message-input:placeholder-shown {
  text-align: center;
}

textarea {
  max-width: 90%;
}

.main-text {
  margin: 25px 0;
}

.title {
  font-size: 2.5rem;
}

.description {
  margin-top: 15px;
  font-size: 1.4rem;
}

.message-label {
  display: block;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

#message-input:placeholder-shown,
textarea {
  font-size: 1.1rem;
}

.btn {
  display: block;
  cursor: pointer;
  width: 200px;
  margin: 10px auto;
  color: var(--dark-grey);
  background-color: var(--gold);
  background-image: linear-gradient(var(--golden-yellow), var(--orange));
  border-color: var(--gold);
  border-width: 3px;
}

.btn:hover {
  background-image: linear-gradient(var(--yellow), var(--dark-orange));
}

#result {
  font-size: 2rem;
  margin: 20px 0;
}

.footer {
  margin-top: 10px;
}

/* file: script.js */
const messageInput = document.getElementById("message-input");
const result = document.getElementById("result");
const checkMessageButton = document.getElementById("check-message-btn");

const helpRegex = /please help|assist me/i;

// User Editable Region

const dollarRegex = /[0-9]+\s*(hundred|thousand|million|billion)?\s+dollars/

// User Editable Region


const denyList = [helpRegex, dollarRegex];

const isSpam = (msg) => denyList.some((regex) => regex.test(msg));

checkMessageButton.addEventListener("click", () => {
  if (messageInput.value === "") {
    alert("Please enter a message.");
    return;
  }

  result.textContent = isSpam(messageInput.value)
    ? "Oh no! This looks like a spam message."
    : "This message does not seem to contain any spam.";
  messageInput.value = "";
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Challenge Information:

Learn Regular Expressions by Building a Spam Filter - Step 21

2

Hi @krovinskii , :wave:

It’s saying that you do not want to capture it, so you must change it to a non-capturing group. So, to answer your questions, there would be no reason to capture in this example, which is why they’re asking you to change the regex pattern.

you can add ?: after the opening parenthesis of a group. For instance, (?:a|b)

So, you must insert ?: at the right place in the pattern.

3

So then why did I put it in parenthesis? It said the parenthesis are for capturing, then the next step told me to put the ?: to uncapture it. Why would I put the parenthesis to begin with if I do not want to capture something?

4

According to this Non-capturing group: (?:...) - JavaScript | MDN it is for better performance as it does not memorise the match.

1 Like
5

You need the parenthesis regardless, but without the ?: you are capturing.

And as @a1legalfreelance has pointed out, it’s due to performance ( which might not be an obvious concern in an app this small, but it’s good practice ).

The tutorial is just taking you through the steps, refining your code and showing you how things work as you go.

First you do this ( a | b ) , to create the group, which happens to capture.
Then you add ( ?: a | b ) , and now you have a non-capturing group, which is more appropriate for this use case.

1 Like
6

it wasn’t mentioned, but in case it wasn’t obvious, you put the a|b in a group, because otherwise the two OR alternatives are from the beginning of the regex to | and then from | to the end. For example: /f(oo|ba)r/ would match "foor" or "fbar", while /foo|bar/ matches or "foo" or "bar"

1 Like