# Learn Functional Programming by Building a Spreadsheet - Step 74

### Tell us what’s happening:

Instructions: regex match

1. number (incl. decimal possibility)
2. operand (* or /)
3. number (incl. decimal posibility)

Not clear from instructions: spaces between groups?

Does this regex fail completely or just the step 74 test(s)?

`/([d+]?.?[d+]) (*|\/) ([d+]?.?[d+])/`

``````<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<body>
<div id="container">
<div></div>
</div>
<script src="./script.js"></script>
</body>
</html>
``````
``````/* file: styles.css */
#container {
display: grid;
grid-template-columns: 50px repeat(10, 200px);
grid-template-rows: repeat(11, 30px);
}

.label {
background-color: lightgray;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
``````
``````/* file: script.js */
const infixToFunction = {
"+": (x, y) => x + y,
"-": (x, y) => x - y,
"*": (x, y) => x * y,
"/": (x, y) => x / y,
}

const infixEval = (str, regex) => str.replace(regex, (_match, arg1, operator, arg2) => infixToFunction[operator](parseFloat(arg1), parseFloat(arg2)));

// User Editable Region

const highPrecedence = str => {
const regex = /([d+]?.?[d+]) (*|\/) ([d+]?.?[d+])/
}

// User Editable Region

const isEven = num => num % 2 === 0;
const sum = nums => nums.reduce((acc, el) => acc + el, 0);
const average = nums => sum(nums) / nums.length;

const median = nums => {
const sorted = nums.slice().sort((a, b) => a - b);
const length = sorted.length;
const middle = length / 2 - 1;
return isEven(length)
? average([sorted[middle], sorted[middle + 1]])
: sorted[Math.ceil(middle)];
}

sum,
average,
median
}

const range = (start, end) => Array(end - start + 1).fill(start).map((element, index) => element + index);
const charRange = (start, end) => range(start.charCodeAt(0), end.charCodeAt(0)).map(code => String.fromCharCode(code));

const evalFormula = (x, cells) => {
const idToText = id => cells.find(cell => cell.id === id).value;
const rangeRegex = /([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi;
const rangeFromString = (num1, num2) => range(parseInt(num1), parseInt(num2));
const elemValue = num => character => idToText(character + num);
const addCharacters = character1 => character2 => num => charRange(character1, character2).map(elemValue(num));
const rangeExpanded = x.replace(rangeRegex, (_match, char1, num1, char2, num2) => rangeFromString(num1, num2).map(addCharacters(char1)(char2)));
const cellRegex = /[A-J][1-9][0-9]?/gi;
const cellExpanded = rangeExpanded.replace(cellRegex, match => idToText(match.toUpperCase()));
}

const container = document.getElementById("container");
const createLabel = (name) => {
const label = document.createElement("div");
label.className = "label";
label.textContent = name;
container.appendChild(label);
}
const letters = charRange("A", "J");
letters.forEach(createLabel);
range(1, 99).forEach(number => {
createLabel(number);
letters.forEach(letter => {
const input = document.createElement("input");
input.type = "text";
input.id = letter + number;
input.ariaLabel = letter + number;
input.onchange = update;
container.appendChild(input);
})
})
}

const update = event => {
const element = event.target;
const value = element.value.replace(/\s/g, "");
if (!value.includes(element.id) && value.startsWith('=')) {

}
}
``````

User Agent is: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36`

### Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 74

It doesn’t say anything about matching on spaces.

The input string is trimmed of all spaces.

I don’t think any of the regex code you are asked to write will require matching on spaces. Well, I guess the `functionCall` regex does match on a space (that regex has not been written yet).

I’m trying to take as small a step as possible, but I don’t understand why this isn’t working to progress:

/()/ => Your first capture group should use a character class
/()/ => Your first capture group should match any digit or a period. Use the special `\d` character class.

`/([\d|.])/` => does not advance
`/([\d]|.)/ `=> does not advance
`/([\d])|./` => does not advance

I feel like I understand enough regex from the previous lesson to do this, but I feel like the tests for this prompt want a specific style/syntax and I can’t get it. Any help would be great. I hate being stuck and unable to progress.

Thanks!

I think the tests are using regex to test the regex, so they are not going to be super flexible, but I’m also not sure if there are that many different ways of writing what is in the requirements.

I assume it is your OR (pipe `|`) that is part of the problem. Also note that its location changes it meaning. If you put in inside the character class, it is just a character.

You shouldn’t need an OR anywhere.

1 Like

Thank you for pointing me in a direction. I’ll return to it and try again.

What about my understanding is wrong here:
`\d+` → one or more digits
`\.?` → optional decimal place
`\d*` → zero or more digits

The whole regex looks like:
`/([\d+\.?\d*?])(*\|\/))([\d+\.?\d*?])/`

I’m struggling to learn regex myself, so bear with me, I hope this is helpful…

I don’t think your understanding on any of these is wrong,

but the first capture group in your whole regex `([\d+\.?\d*?])` is an entire character class, meaning it will match any digit one or more times OR any decimal place one or zero time OR any digit zero or more times (non-greedy) ← this part I don’t fully understand, but I read this on the MDN page

? - If used immediately after any of the quantifiers `*` , `+` , `?` , or `{}` , makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).

The feedback I get from the lesson when using your regex in this comment is, " Your first capture group should match any digit or a period." It wants to match against only any digit or a period.

You were very close here,

``````/([\d|.])/ => does not advance
``````

but recall that a character class (denoted by the brackets `[ ]`) will match any one of the enclosed characters, you do not need to include the “or” character (`|`).

After you get this bit right, the lesson feedback will update to “Your first capture group should match the character class one or more times.” Add the character to do that, and then it accepts the first capture group.

P.S. I agree with ya here, it’s very specific `but I feel like the tests for this prompt want a specific style/syntax and I can’t get it.`

1 Like

“Your first capture GROUP should match any digit or a period.”

It also instructs me to use a character class in this group.

So, what is wrong with:

`/([\d]+|.)/`

Is this correct but it’s not advancing the hints just because the tests are note written that way yet?

`[\d]` is redundant. Maybe make a character class that can also match the period?

Nothing as far as I know, other than what the above commenter said, except that it’s not what the lesson wants. The lesson wants you to define a character class that will match any digit or a period (notice in your example the period is outside the character class), but also specifically using the \d (as opposed to 0-9), and to put that inside a capture group.

Also I just want to note, the final regex that the lesson accepts doesn’t really satisfy the requirement as stated, " a regular expression that matches a number (including decimal numbers) followed by a `*` or `/` operator followed by another number." The solution regex will match against “./.” (the last time I checked a period is not a number). There’s at least one better way to do this that I could come up with (which actually looks an awful lot like the one if your original post here). I found a few posts on the forum about this topic and it seems like this is an area the JS course might see some improvements. It is in Beta after all… I would recommend just doing exactly what the feedback asks until it’s accepted and moving on.

Edit: BTW I found the MDN Reference on Regex to be very helpful, if you’re interested in some additional resources

1 Like

sure, feel free to open an issue with your suggestions!

1 Like

Oh, someone already has, otherwise I would have, lol.

Oof, finally solved it! Thank you all for your expanded explanations and hints along the way!

1 Like

This was the clarity of instruction that allowed me to complete it.

1 Like