Tell us what’s happening:
My code is functional but is failing the tests for some odd reason. I think i might be getting some type of input wrong but I really don’t know.
Your code so far
<!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>
*,
*::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;
}
//Functions:
const getFlags = () => {
let flagString = "";
globalFlag.checked? flagString += "g": flagString;
caseInsensitiveFlag.checked? flagString += "i": flagString;
return flagString;
}
const displayResult = () => {
const userRegex = new RegExp(regex, flags);
const matches = flags.includes("g")?
Array.from(testString.matchAll(userRegex)):
testString.match(userRegex);
console.log(matches)
if (matches) {
if (flags.includes("g")) {
stringToTest.innerHTML = testString.replaceAll(userRegex, (match) => {
return `<span class="highlight">${match}</span>`
})
const matchString = [];
for (const match of matches) {
matchString.push(match[0]);
}
testResult.innerText = matchString.join(", ");
} else {
stringToTest.innerHTML = testString.replace(userRegex, (match) => {
return `<span class="highlight">${match}</span>`;
})
testResult.innerText = matches[0];
}
} else {
testResult.innerText = "no match";
}
console.log(stringToTest.innerHTML)
}
//Variables:
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");
let flags = "";
let regex = "";
let testString = "";
//Event Listeners
globalFlag.addEventListener("change", () => {
flags = getFlags()
})
caseInsensitiveFlag.addEventListener("change", () => {
flags = getFlags()
})
regexPattern.addEventListener("change", (event) => {
regex = event.target.value;
})
stringToTest.addEventListener("input", (event) => {
testString = event.target.innerText;
})
testButton.addEventListener("click", () => {
displayResult();
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Challenge Information:
Build a RegEx Sandbox - Build a RegEx Sandbox
EDIT: This passes the first 11 tests