Build a RegEx Sandbox - Build a RegEx Sandbox

JavaScript
1

Tell us what’s happening:

15. When you click the testButton button, if the regex pattern matches the test string, the matched text should be surrounded by a span element with the class of highlight.

It highlights one match, but i’m having trouble highlighting when there are multiple matches.

I believe it is finding the matches ok, just having trouble with the highlighting.

Your code so far

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


/* file: styles.css */


/* file: script.js */

Your browser information:

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

Challenge Information:

Build a RegEx Sandbox - Build a RegEx Sandbox

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

let inputPattern;
let inputString;
let updatedString;

let flags;


function getFlags() {
    if (i.checked == true && g.checked == false) {
        return "i"
    } else if (i.checked == false && g.checked == true) {
        return "g"
    } else if (i.checked == true && g.checked == true) {
        return "ig"
    } else {
        return ""
    }
}

i.addEventListener('change', () => {
    getFlags();
});

g.addEventListener('change', () => {
    getFlags();
});

testButton.addEventListener('click', () => {
    inputPattern = new RegExp(regexPattern.value, getFlags());
    inputString = stringToTest.textContent;
    if (inputPattern.test(inputString)) {
        updatedString = inputString.replace(inputString.match(inputPattern), `<span class="highlight">${inputString.match(inputPattern)}</span>`);
        
        testResult.innerText = inputString.match(inputPattern).join(", ");
        stringToTest.innerHTML = updatedString;
        console.log(inputString.match(inputPattern))
    } else {
        testResult.innerText = "no match"
    }

    
});
3

It doesn’t look like you’re using these variables in your code.

4

ok yes, i can see that now.

Is that relevant to my question though?

5

How do you know if it’s finding the matches okay or what type of structure the match is returning? Log to find out.

6 
console.log(inputString.match(inputPattern))

[ 'T', index: 0, input: 'TTROY', groups: undefined ]
[ 'T', 'T' ]

I’m logging the result

The above result is with “g” ticked and without

7

Can i get some help please?

I’ve been waiting for 24 hours and i’ve barely had any help.

8

if you made updates to your code, please post your updated code

9

i havent really made any significant changes since my original post - but here is my current code:

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

let inputPattern;
let inputString;
let updatedString = "";





function getFlags() {
    if (caseInsensitiveFlag.checked == true && globalFlag.checked == false) {
        return "i"
    } else if (caseInsensitiveFlag.checked == false && globalFlag.checked == true) {
        return "g"
    } else if (caseInsensitiveFlag.checked == true && globalFlag.checked == true) {
        return "ig"
    } else {
        return ""
    }
}

caseInsensitiveFlag.addEventListener('change', () => {
    getFlags();
});

globalFlag.addEventListener('change', () => {
    getFlags();
});

testButton.addEventListener('click', () => {
    inputPattern = new RegExp(regexPattern.value, getFlags());
    inputString = stringToTest.textContent;
    

    if (inputPattern.test(inputString)) {
        
        updatedString = inputString.replace(inputString.match(inputPattern), `<span class="highlight">${inputString.match(inputPattern)}</span>`);
        
        testResult.innerText = inputString.match(inputPattern).join(", ");
        stringToTest.innerHTML = updatedString;
        console.log(inputString.match(inputPattern))
    } else {
        testResult.innerText = "no match"
    }

    
});
10

are you sure replace here is doing what you think?

match returns an array, can replace take an array?

you need to review how replace works

11

It may help to review this lecture:

Working with Regular Expressions - How Can You Match and Replace All Occurrences in a String? | Learn | freeCodeCamp.org

1 Like
12 
testButton.addEventListener('click', () => {
    inputPattern = new RegExp(regexPattern.value, getFlags());
    inputString = stringToTest.textContent;
    

    if (inputPattern.test(inputString)) {
        updatedString = inputString.replace(inputPattern, `<span class="highlight">${inputString.match(inputPattern)}</span>`);
        
        testResult.innerText = inputString.match(inputPattern).join(", ");
        stringToTest.innerHTML = updatedString;
        console.log(inputString.match(inputPattern))
    } else {
        testResult.innerText = "no match"
    }

    
});

I’ve updated the replace function, it’s now finding all the matches. But i’m not sure what to put in between the the span elements

${*******)}

13

have you looked at the documentation for replace? there is an alternative to the second argument that makes replaces much more flexible

14

thank you

i did a bit of further research and worked it out

thanks again for your help - it’s very much appreciated