Build a RegEx Sandbox - Build a RegEx Sandbox

Curriculum Help
1

Tell us what’s happening:

After like three hours of debugging on other IDEs, I came up with the code below and it seems to be working fine. I did the test cases given in the website, typed in some random gibberish with a valid regex, and the tongue twister test case in the forums. Even after passing all of those, I pass anything but test 15. Can anyone find out some possible reasons?

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");

testButton.addEventListener("click", () => {
  const flags = getFlags();
  const regex = new RegExp(regexPattern.value, flags)
  console.log(regex);
  console.log(typeof regex)
  if(flags.includes('g')){
    // global - there may be more than one matching, exactly one matching, or none
    const foundItemsObject = createCopy(regex);
    console.log(foundItemsObject);
    if(isRegexIteratorEmpty(createCopy(regex))){
      testResult.textContent = "no match";
      return;
    }
    let result = "";
    let starts = [];
    let ends = [];
    for(const item of [...createCopy(regex)]){
      console.log(item.index, item.index + item[0].length);
      starts.push(item.index);
      ends.push(item.index + item[0].length);
    }
    for(let i = 0; i < stringToTest.textContent.length; i++){
      if(starts.includes(i)){
        // meaning that the highlight class should be included
        result += '<span class="highlight">';
        console.log(i);
      }
      if(ends.includes(i)){
        result += '</span>';
        console.log(i);
      }
      result += stringToTest.textContent[i]
    }
    stringToTest.innerHTML = result;
    console.log(starts, ends);
    console.log(result);
    testResult.textContent = makeString(foundItemsObject);
  } else{
    // non-global - there may be exactly one matching, or none
    const foundItemObject = stringToTest.textContent.match(regex);
    if(foundItemObject === null){
      testResult.textContent = "no match";
      return;
    }
    const findWordLength = foundItemObject[0].length;
    let result = "";
    let found = false;
    for(let i = 0; i < stringToTest.textContent.length; i++) {
      if (i === foundItemObject.index) {
        // meaning that the highlight class should be added
        result += '<span class="highlight">';
      }
      if (i === foundItemObject.index + findWordLength) {
        // meaning that the highlight class should be closed
        if(!found) {
          result += '</span>';
        }
        found = true;
      }
      result += stringToTest.textContent[i];
    }
    stringToTest.innerHTML = result;
    testResult.textContent = foundItemObject[0];
    console.log(result);
    console.log(findWordLength);
    console.log(foundItemObject);
    console.log(stringToTest.innerHTML);
  }
})

function getFlags(){
  const caseInsensitive = caseInsensitiveFlag.checked
  const global = globalFlag.checked;
  return (caseInsensitive ? "i": "") + (global ? "g": "");
}

function createCopy(regex){
  return stringToTest.textContent.matchAll(regex);
}

function isRegexIteratorEmpty(foundItemObject){
  // assume that it is an array
  return ![...foundItemObject].length;
}

function convert(resi){
  return [...resi];
}

function makeString(resi){
  // the inputs look like this:
  // (N) [Array(1), Array(1)...] (repeating N times)
  const listOfArrays = convert(resi);
  console.log(listOfArrays.length);
  let result = "";
  for(let i = 0; i < listOfArrays.length; i++){
    result += listOfArrays[i][0];
    result += (i === listOfArrays.length - 1 ? "" : ", ");
  }
  return result;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36

Challenge Information:

Build a RegEx Sandbox - Build a RegEx Sandbox

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-regex-sandbox/66e028680eca7d21db7e1aee.md at main · freeCodeCamp/freeCodeCamp · GitHub

4

Welcome to the forum @vincent-0-tnecniv,

It looks like your code was too long to automatically inserted by the “Help” button.

Please update your original message, or reply to this one, to include your code, formatted as follows:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

Thank you.

5

I just added the code back.

6

Thanks.

It doesn’t look like anything is showing up in the #result element after you click the “Test Regex” button. Try checking your code around that.

7

Issue solved. For some reason multiple matches just make the HTML highlight not close. This issue is fixed and the code now passes.