Build a RegEx Sandbox - Build a RegEx Sandbox

[Xander]

Tell us what’s happening:

I’m failing test 8-10 but the getFlags() function returns a string of “i” or “g” or “ig” or “gi”. When the checkboxes is checked independently and together correctly.

Your code so far

<!-- file: index.html -->

/* file: script.js */

// HTML objects
let regexPattern = document.getElementById("pattern");
let stringToTest = document.getElementById("test-string");
let testButton = document.getElementById("test-btn");
let testResult = document.getElementById("result");
let caseInsensitiveFlag = document.getElementById("i");
let globalFlag = document.getElementById("g");

//---Varables---
let sFlag = ["iFalse","gFalse"];


//---Functions---

function getFlags(input) {
  
  // Grabs the checkbox state pair
  if (input === "iTrue") {
    sFlag = sFlag.map(e => e.replace("iFalse", "iTrue"));
  }

  if (input === "iFalse") {
    sFlag = sFlag.map(e => e.replace("iTrue", "iFalse"));
  }

  if (input === "gTrue") {
    sFlag = sFlag.map(e => e.replace("gFalse", "gTrue"));
  }

  if (input === "gFalse") {
    sFlag = sFlag.map(e => e.replace("gTrue", "gFalse"));
  }

  //---Debug---
  console.log("sFlag1: " + sFlag);

  //Returns flags
  let returnFlag = "";

  if (sFlag.includes("iFalse") && sFlag.includes("gFalse")) {
    returnFlag = "";
  }

  if (sFlag.includes("iTrue") && sFlag.includes("gFalse")) {
    returnFlag = "i";
  }

  if (sFlag.includes("iFalse") && sFlag.includes("gTrue")) {
    returnFlag = "g";
  }

  if (sFlag.includes("iTrue") && sFlag.includes("gTrue")) {
    returnFlag = "ig";
  } 

  //---Debug---
  //console.log("returnFlag: " + (returnFlag == "i"));

  return returnFlag;

}

//---Event Listeners---

//Test Regex Button
testButton.addEventListener("click", () => {
  
})

//Checkboxes
let flagArr = [];
caseInsensitiveFlag.addEventListener("click", (event) => {
    
  if (event.target.checked) {
    getFlags("iTrue");
  }
  if (!event.target.checked) {
    getFlags("iFalse");
  }

  //console.log("iETC: " + event.target.checked);

});

globalFlag.addEventListener("change", (event) => {
    
  if (event.target.checked) {
  getFlags("gTrue");

  } else {
    getFlags("gFalse");  
  }

  //console.log("gETC: " + event.target.checked);

});

/* file: styles.css */

Your browser information:

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

Challenge Information:

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

[a1legalfreelance]

Please add all your code into the help template.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[ockley]

for both global and case-insensitive checkboxes, you could just test if the the “checked” attribute is set (eg. caseInsensitiveFlag.checked === true).

I would recommend that you start by creating an empty string (flagString). Then “i” could be added to a string if case-insensitive is true and “g” if global is true, and just return that string.

When creating the regex, you can use new RegExp() and set the flag as the second argument.