Build a RegEx Sandbox - Build a RegEx Sandbox

JavaScript
1

Tell us what’s happening:

I can’t understand why the task is failing. My code works fine, it does everything as it is suppose to do. But still failing 2 tasks.

    1. When the inner HTML of stringToTest is Gu1n34 P1g5, the value of regexPattern is \d+, and the global flag is checked, the inner text of #result should become 1, 34, 1, 5 by clicking the testButton button.

Failed: 19. When there’s a match, the matched text should be displayed inside #result.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Regex Sandbox</title>

</head>

<body>
    <h1>Regex Sandbox</h1>
    <main>
        <div id="regex-container">
            <label for="pattern">Regex Pattern:
                <div id="pattern-container">/<input type="text" id="pattern" name="pattern"
                        placeholder="Enter your regex pattern">/</div>
            </label>
            <div id="flags-container">
                <p>Flags: </p>
                <label for="i">
                    <input type="checkbox" name="flags" id="i"> i
                </label>
                <label for="g">
                    <input type="checkbox" name="flags" id="g"> g
                </label>
            </div>
        </div>
        <div id="test-container">
            <p>Test String:</p>
            <div id="test-string" placeholder="Enter your test string" contenteditable="true"></div>
        </div>
        <button class="btn" id="test-btn" type="button">Test Regex</button>
        <div id="result-container">
            <h2>Result:</h2>
            <p id="result">
            </p>
        </div>

    </main>
    <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;
    --border: 0.2rem solid darkgrey;
    --padding: 0.3rem;
}

body {
    background-color: var(--dark-grey);
    color: var(--light-grey);
    font-size: 20px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    padding: 5px;
}

h1 {
    margin: 5rem auto 2rem;
    text-align: center;
}

p {
    padding: var(--padding);
}

#regex-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border);
}

#regex-container>label {
    padding: var(--padding);
    flex: 1 1 auto;
}

#pattern-container {
    display: inline-block;
    color: var(--dark-grey);
    background-color: var(--light-grey);
    margin: 5px;
    border: var(--border);
}

#pattern {
    margin: 0.2rem;
    border: 0;
    font-size: 1rem;
    width: calc(100% - 1.2rem);
}

#pattern:focus {
    outline: none;
}

#flags-container {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

#flags-container>label {
    padding: var(--padding);
    margin-right: 0.3rem;
}

#test-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    border: var(--border);
}

#test-string {
    background-color: var(--light-grey);
    min-height: 5rem;
    color: var(--dark-grey);
    border-top: var(--border);
    font-size: 1.2rem;
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    color: var(--dark-grey);
}

::placeholder {
    color: var(--dark-grey);
}


button {
    display: block;
    cursor: pointer;
    width: 8rem;
    margin: 0.2rem auto;
    color: var(--dark-grey);
    background-color: var(--gold);
    background-image: linear-gradient(var(--golden-yellow), var(--orange));
    border-color: var(--gold);
    border-width: 0.2rem;
    font-size: 1.1rem;
}

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

#result-container {
    max-width: 680px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

h2 {
    align-self: flex-start;
    margin: 0.4rem 0.2rem 0.2rem;
    flex: 0 1 auto;
}

#result {
    color: var(--dark-grey);
    background-color: var(--light-grey);
    font-size: 1.5rem;
    flex: 1 1 auto;
    margin: 0.2rem;
    border: var(--border);
    min-height: 3rem;
}

.highlight {
    background-color: lightgreen;
}

/* file: script.js */
const regexPattern = document.getElementById("pattern");
const stringToTest = document.getElementById("test-string");
const testButton = document.getElementById("test-btn");
const testResult = document.getElementById("result");
const caseInsensitiveFlag = document.getElementById("i");
const globalFlag = document.getElementById("g");

function getFlags() {
    const iflag = caseInsensitiveFlag.checked;
    const gflag = globalFlag.checked;

    if (iflag && gflag) {
        return "ig";
    } else if (iflag) {
        return "i";
    } else if (gflag) {
        return "g";
    } else {
        return "";
    }
}

function getMatches() {
    const flags = getFlags();
    const regex = new RegExp(regexPattern.value, flags)
    let matches = stringToTest.innerText.match(regex)
    if (matches) {
        testResult.innerText = matches
        stringToTest.innerHTML = stringToTest.innerHTML.replace(regex, (content) => `<span class='highlight'>${content}</span>`)
    } else {testResult.innerText = "no match"}
}


testButton.addEventListener("click", getMatches)

Your browser information:

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

Challenge Information:

Build a RegEx Sandbox - Build a RegEx Sandbox
https://www.freecodecamp.org/learn/full-stack-developer/lab-regex-sandbox/lab-regex-sandbox

3

if you test this situation, what does your app do?

4

Hi.
It returns: 1,34,1,5
As it is suppose to do.
And it highlights the digits.

5

IIRC there is an issue here with multiple tests in a row which does not show up when you test manually.

Add some console.log messages to log the input and output of your program, so you can see what the tests are sending and how your program reacts.

6

Ok, it’s even more straight forward:

inner text of #result should become 1, 34, 1, 5 by clicking the testButton button.

In case of multiple matches, each matched text should be separated from the next one by a comma and a space.

1 Like
7

OK, so the “error” is that I should be changing my output to a string with each value not only separated by a comma, but also a space. Oh well..
Thanks for the support. :wink:

1 Like
8

Thems the rules. Good news is that everything else worked well.

9

Thank you for your assistance. I solved it by just adding join(", "). Simple.
Have a good day.

1 Like
10

I noticed that you use the code above to insert class on matched character. The (content) parameter is new to me. I re-read the lecture on “Basic Regex” and cannot find section where this way is explained on. I only know a similar way by using captured group. But captured group need to modify your regex with inserting (). Can you explain to me about this (content) and where I can read more about it?
Thank you.

11

Hi, I already have this problem.
I try different ways to solve it, but I can’t pass this steps.
my methode 1:

function checkReg() {

const regPattern = regexPattern.value;
const testString = stringToTest.innerText;
const flags = getFlags();

testResult.innerText = "";

const regex = new RegExp(regPattern, flags);
let matchedText = "";

let isMatch = regex.test(testString);

  if (isMatch) {
    matchedText = testString.match(regex);
    const hightLightedText = stringToTest.innerHTML.replace(regex, `<span class="highlight">$&</span>`);
    stringToTest.innerHTML = hightLightedText;
    let matches = [];
      matches.push(matchedText);
      testResult.innerText = matches.join(", ");
  }
  else {
    testResult.innerText += "no match";
  };
};

My methode 2:


function checkReg() {
const regPattern = regexPattern.value;
const testString = stringToTest.innerText;
const flags = getFlags();

testResult.innerText = "";

const regex = new RegExp(regPattern, flags);
let matchedText = "";

let isMatch = regex.test(testString);

  if (isMatch) {
    matchedText = testString.match(regex);
    const hightLightedText = stringToTest.innerHTML.replace(regex, `<span class="highlight">$&</span>`);
    stringToTest.innerHTML = hightLightedText;
    
  if (testResult.innerText === "") {
        testResult.innerText += `${matchedText}`;
      }
      else {
        testResult.innerText += `, ${matchedText}`;
      };
  }
  else {
    testResult.innerText += "no match";
  };
};

I also add this CSS property to #result:

white-space: nowrap;

Both of them have the same output that removes the whitespace after the comma. Why?

12

Good news! :hugs:
I changed my .push() method and it’s worked!

1 Like
13

hi @Panah , please create your own topic to ask for help

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

14

Yes, definitely
I just avoided creating a new thread because I saw the problem being raised was similar to mine. I thought this would be better. But apparently it wasn’t. :grimacing: :blush:

16

please don’t necropost, this topic is 3 months old