Fix: Match single quotes

[Vimal-Raghubir]

Pre-Submission Checklist

• Your pull request targets the staging branch of freeCodeCamp.
• Branch starts with either fix/, feature/, or translate/ (e.g. fix/signin-issue)
• You have only one commit (if not, squash them into one commit).
• All new and existing tests pass the command npm test. Use git commit --amend to amend any fixes.

Type of Change

• Small bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds new functionality)
• Breaking change (fix or feature that would change existing functionality)
• Add new translation (feature adding new translations)

Checklist:

• Tested changes locally.
• Addressed currently open issue (replace XXXXX with an issue no in next line)

Closes #17508

Description

The <a href> attribute was hard coded to check only for double quoted URLs which does not cover the single quoted URLs. After checking the documentation, single quoted URLs are supported by these tags therefore I updated the regex expression to handle them as well.

[camperbot]

@Vimal-Raghubir updated the pull request.

[Vimal-Raghubir]

I am not sure how this styling is causing the linter to fail since it works on every regex checker I've used. Could a reviewer advise on this?

[scissorsneedfoodtoo]

@Vimal-Raghubir, thank you for taking on this issue, too!

Regex is a little tricky, with some things needing to be double escaped for it to pass the linter. I'll take a look at it later when I have my laptop in front of me. Leaving this here so we can simplify your regex a little bit:

<a href=(\'\'|\"\")>

[scissorsneedfoodtoo]

Hi @Vimal-Raghubir, sorry for the delay.

I think I figured out how to refine both tests. Currently the challenge can be passed so long as "information about batteries" is wrapped in the <a> tag. So <a>Click here for information about batteries</a> still passes. We can change the regex to strictly match the text that we want.

Also, your test wasn't passing because of the way some characters need to be escaped in the test string. You're right, your regex works in regex checkers, but the problem was that you could have mismatching single and double quotes and still pass the check.

Could you change the tests to the following?

      "tests": [
        {
          "text": "Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".",
          "testString": "assert($('a').text().match(/^(information about batteries)$/g), 'Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');"
        },
        {
          "text": "Make sure your <code>a</code> element has a closing tag.",
          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a href=(''|\"\")>/g).length, 'Make sure your <code>a</code> element has a closing tag.');"
        }
      ],

[Vimal-Raghubir]

I figured the mismatching quotes wouldn't have been handled by my regex expression. Interesting, didn't know you could use the OR operator within the regex expression. Will make the recommended changes. Thank you for your amazing support @scissorsneedfoodtoo . 👍

[camperbot]

@Vimal-Raghubir updated the pull request.

[scissorsneedfoodtoo]

👍 👍 Everything LGTM! 👍 👍

Thank you for making those changes so quickly, and I'm always happy to look at your PRs. I also didn't know about the OR operator in regex and had to do some digging. I'm still not so good with it, so I'm glad we could figure out something that works.

Looking forward to your next contribution!