fix: use dfn instead of code tag (#36640)
* Use dfn tags
* remove misused <dfn> tags
* Revert "remove misused <dfn> tags"
This reverts commit b24968a968.
* Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.english.md
Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
* Make "array" lowercase
Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
* Fix dfn usage
* Address last dfn tags
This commit is contained in:
SomeDer
Randell Dawson
@@ -7,10 +7,10 @@ forumTopicId: 301341
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In regular expressions, a <code>greedy</code> match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a <code>lazy</code> match, which finds the smallest possible part of the string that satisfies the regex pattern.
|
||||
In regular expressions, a <dfn>greedy</dfn> match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a <dfn>lazy</dfn> match, which finds the smallest possible part of the string that satisfies the regex pattern.
|
||||
You can apply the regex <code>/t[a-z]*i/</code> to the string <code>"titanic"</code>. This regex is basically a pattern that starts with <code>t</code>, ends with <code>i</code>, and has some letters in between.
|
||||
Regular expressions are by default <code>greedy</code>, so the match would return <code>["titani"]</code>. It finds the largest sub-string possible to fit the pattern.
|
||||
However, you can use the <code>?</code> character to change it to <code>lazy</code> matching. <code>"titanic"</code> matched against the adjusted regex of <code>/t[a-z]*?i/</code> returns <code>["ti"]</code>.
|
||||
Regular expressions are by default greedy, so the match would return <code>["titani"]</code>. It finds the largest sub-string possible to fit the pattern.
|
||||
However, you can use the <code>?</code> character to change it to lazy matching. <code>"titanic"</code> matched against the adjusted regex of <code>/t[a-z]*?i/</code> returns <code>["ti"]</code>.
|
||||
<strong>Note</strong><br>Parsing HTML with regular expressions should be avoided, but pattern matching an HTML string with regular expressions is completely fine.
|
||||
</section>
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ But it does not find matches in the following strings since there are no letter
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Write a <code>greedy</code> regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter <code>C</code>.
|
||||
Write a greedy regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter <code>C</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -39,19 +39,19 @@ Write a <code>greedy</code> regex that finds one or more criminals within a grou
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your regex should match <code>one</code> criminal (<code>C</code>) in <code>"C"</code>
|
||||
- text: Your regex should match one criminal (<code>C</code>) in <code>"C"</code>
|
||||
testString: assert('C'.match(reCriminals) && 'C'.match(reCriminals)[0] == 'C');
|
||||
- text: Your regex should match <code>two</code> criminals (<code>CC</code>) in <code>"CC"</code>
|
||||
- text: Your regex should match two criminals (<code>CC</code>) in <code>"CC"</code>
|
||||
testString: assert('CC'.match(reCriminals) && 'CC'.match(reCriminals)[0] == 'CC');
|
||||
- text: Your regex should match <code>three</code> criminals (<code>CCC</code>) in <code>"P1P5P4CCCP2P6P3"</code>
|
||||
- text: Your regex should match three criminals (<code>CCC</code>) in <code>"P1P5P4CCCP2P6P3"</code>
|
||||
testString: assert('P1P5P4CCCP2P6P3'.match(reCriminals) && 'P1P5P4CCCP2P6P3'.match(reCriminals)[0] == 'CCC');
|
||||
- text: Your regex should match <code>five</code> criminals (<code>CCCCC</code>) in <code>"P6P2P7P4P5CCCCCP3P1"</code>
|
||||
- text: Your regex should match five criminals (<code>CCCCC</code>) in <code>"P6P2P7P4P5CCCCCP3P1"</code>
|
||||
testString: assert('P6P2P7P4P5CCCCCP3P1'.match(reCriminals) && 'P6P2P7P4P5CCCCCP3P1'.match(reCriminals)[0] == 'CCCCC');
|
||||
- text: Your regex should not match any criminals in <code>""</code>
|
||||
testString: assert(!reCriminals.test(''));
|
||||
- text: Your regex should not match any criminals in <code>"P1P2P3"</code>
|
||||
testString: assert(!reCriminals.test('P1P2P3'));
|
||||
- text: Your regex should match <code>fifty</code> criminals (<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>) in <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code>.
|
||||
- text: Your regex should match fifty criminals (<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>) in <code>"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"</code>.
|
||||
testString: assert('P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals) && 'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals)[0] == "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC");
|
||||
|
||||
```
|
||||
|
||||
@@ -21,7 +21,7 @@ longHand.test(varNames); // Returns true
|
||||
shortHand.test(varNames); // Returns true
|
||||
```
|
||||
|
||||
These shortcut character classes are also known as <code>shorthand character classes</code>.
|
||||
These shortcut character classes are also known as <dfn>shorthand character classes</dfn>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@@ -8,7 +8,7 @@ forumTopicId: 301349
|
||||
## Description
|
||||
<section id='description'>
|
||||
Prior challenges showed that regular expressions can be used to look for a number of matches. They are also used to search for patterns in specific positions in strings.
|
||||
In an earlier challenge, you used the <code>caret</code> character (<code>^</code>) inside a <code>character set</code> to create a <code>negated character set</code> in the form <code>[^thingsThatWillNotBeMatched]</code>. Outside of a <code>character set</code>, the <code>caret</code> is used to search for patterns at the beginning of strings.
|
||||
In an earlier challenge, you used the caret character (<code>^</code>) inside a character set to create a negated character set in the form <code>[^thingsThatWillNotBeMatched]</code>. Outside of a character set, the caret is used to search for patterns at the beginning of strings.
|
||||
|
||||
```js
|
||||
let firstString = "Ricky is first and can be found.";
|
||||
@@ -24,7 +24,7 @@ firstRegex.test(notFirst);
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use the <code>caret</code> character in a regex to find <code>"Cal"</code> only in the beginning of the string <code>rickyAndCal</code>.
|
||||
Use the caret character in a regex to find <code>"Cal"</code> only in the beginning of the string <code>rickyAndCal</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@@ -8,7 +8,7 @@ forumTopicId: 301351
|
||||
## Description
|
||||
<section id='description'>
|
||||
The last challenge used the plus <code>+</code> sign to look for characters that occur one or more times. There's also an option that matches characters that occur zero or more times.
|
||||
The character to do this is the <code>asterisk</code> or <code>star</code>: <code>*</code>.
|
||||
The character to do this is the asterisk or star: <code>*</code>.
|
||||
|
||||
```js
|
||||
let soccerWord = "gooooooooal!";
|
||||
|
||||
@@ -7,8 +7,8 @@ forumTopicId: 301352
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
In the last challenge, you learned to use the <code>caret</code> character to search for patterns at the beginning of strings. There is also a way to search for patterns at the end of strings.
|
||||
You can search the end of strings using the <code>dollar sign</code> character <code>$</code> at the end of the regex.
|
||||
In the last challenge, you learned to use the caret character to search for patterns at the beginning of strings. There is also a way to search for patterns at the end of strings.
|
||||
You can search the end of strings using the dollar sign character <code>$</code> at the end of the regex.
|
||||
|
||||
```js
|
||||
let theEnding = "This is a never ending story";
|
||||
|
||||
@@ -7,8 +7,8 @@ forumTopicId: 301354
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You saw how you can use <code>character sets</code> to specify a group of characters to match, but that's a lot of typing when you need to match a large range of characters (for example, every letter in the alphabet). Fortunately, there is a built-in feature that makes this short and simple.
|
||||
Inside a <code>character set</code>, you can define a range of characters to match using a <code>hyphen</code> character: <code>-</code>.
|
||||
You saw how you can use <dfn>character sets</dfn> to specify a group of characters to match, but that's a lot of typing when you need to match a large range of characters (for example, every letter in the alphabet). Fortunately, there is a built-in feature that makes this short and simple.
|
||||
Inside a character set, you can define a range of characters to match using a hyphen character: <code>-</code>.
|
||||
For example, to match lowercase letters <code>a</code> through <code>e</code> you would use <code>[a-e]</code>.
|
||||
|
||||
```js
|
||||
|
||||
@@ -8,7 +8,7 @@ forumTopicId: 301357
|
||||
## Description
|
||||
<section id='description'>
|
||||
You learned how to match literal patterns (<code>/literal/</code>) and wildcard character (<code>/./</code>). Those are the extremes of regular expressions, where one finds exact matches and the other matches everything. There are options that are a balance between the two extremes.
|
||||
You can search for a literal pattern with some flexibility with <code>character classes</code>. Character classes allow you to define a group of characters you wish to match by placing them inside square (<code>[</code> and <code>]</code>) brackets.
|
||||
You can search for a literal pattern with some flexibility with <dfn>character classes</dfn>. Character classes allow you to define a group of characters you wish to match by placing them inside square (<code>[</code> and <code>]</code>) brackets.
|
||||
For example, you want to match <code>"bag"</code>, <code>"big"</code>, and <code>"bug"</code> but not <code>"bog"</code>. You can create the regex <code>/b[aiu]g/</code> to do this. The <code>[aiu]</code> is the character class that will only match the characters <code>"a"</code>, <code>"i"</code>, or <code>"u"</code>.
|
||||
|
||||
```js
|
||||
|
||||
@@ -7,8 +7,8 @@ forumTopicId: 301358
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
So far, you have created a set of characters that you want to match, but you could also create a set of characters that you do not want to match. These types of character sets are called <code>negated character sets</code>.
|
||||
To create a <code>negated character set</code>, you place a <code>caret</code> character (<code>^</code>) after the opening bracket and before the characters you do not want to match.
|
||||
So far, you have created a set of characters that you want to match, but you could also create a set of characters that you do not want to match. These types of character sets are called <dfn>negated character sets</dfn>.
|
||||
To create a negated character set, you place a caret character (<code>^</code>) after the opening bracket and before the characters you do not want to match.
|
||||
For example, <code>/[^aeiou]/gi</code> matches all characters that are not a vowel. Note that characters like <code>.</code>, <code>!</code>, <code>[</code>, <code>@</code>, <code>/</code> and white space are matched - the negated vowel character set only excludes the vowel characters.
|
||||
</section>
|
||||
|
||||
|
||||
@@ -7,10 +7,10 @@ forumTopicId: 301360
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>Lookaheads</code> are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string.
|
||||
There are two kinds of <code>lookaheads</code>: <code>positive lookahead</code> and <code>negative lookahead</code>.
|
||||
A <code>positive lookahead</code> will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as <code>(?=...)</code> where the <code>...</code> is the required part that is not matched.
|
||||
On the other hand, a <code>negative lookahead</code> will look to make sure the element in the search pattern is not there. A negative lookahead is used as <code>(?!...)</code> where the <code>...</code> is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present.
|
||||
<dfn>Lookaheads</dfn> are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string.
|
||||
There are two kinds of lookaheads: <dfn>positive lookahead</dfn> and <dfn>negative lookahead</dfn>.
|
||||
A positive lookahead will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as <code>(?=...)</code> where the <code>...</code> is the required part that is not matched.
|
||||
On the other hand, a negative lookahead will look to make sure the element in the search pattern is not there. A negative lookahead is used as <code>(?!...)</code> where the <code>...</code> is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present.
|
||||
Lookaheads are a bit confusing but some examples will help.
|
||||
|
||||
```js
|
||||
@@ -22,7 +22,7 @@ quit.match(quRegex); // Returns ["q"]
|
||||
noquit.match(qRegex); // Returns ["q"]
|
||||
```
|
||||
|
||||
A more practical use of <code>lookaheads</code> is to check two or more patterns in one string. Here is a (naively) simple password checker that looks for between 3 and 6 characters and at least one number:
|
||||
A more practical use of lookaheads is to check two or more patterns in one string. Here is a (naively) simple password checker that looks for between 3 and 6 characters and at least one number:
|
||||
|
||||
```js
|
||||
let password = "abc123";
|
||||
@@ -34,7 +34,7 @@ checkPass.test(password); // Returns true
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <code>lookaheads</code> in the <code>pwRegex</code> to match passwords that are greater than 5 characters long, do not begin with numbers, and have two consecutive digits.
|
||||
Use lookaheads in the <code>pwRegex</code> to match passwords that are greater than 5 characters long, do not begin with numbers, and have two consecutive digits.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@@ -8,7 +8,7 @@ forumTopicId: 301364
|
||||
## Description
|
||||
<section id='description'>
|
||||
Some patterns you search for will occur multiple times in a string. It is wasteful to manually repeat that regex. There is a better way to specify when you have multiple repeat substrings in your string.
|
||||
You can search for repeat substrings using <code>capture groups</code>. Parentheses, <code>(</code> and <code>)</code>, are used to find repeat substrings. You put the regex of the pattern that will repeat in between the parentheses.
|
||||
You can search for repeat substrings using <dfn>capture groups</dfn>. Parentheses, <code>(</code> and <code>)</code>, are used to find repeat substrings. You put the regex of the pattern that will repeat in between the parentheses.
|
||||
To specify where that repeat string will appear, you use a backslash (<code>\</code>) and then a number. This number starts at 1 and increases with each additional capture group you use. An example would be <code>\1</code> to match the first group.
|
||||
The example below matches any word that occurs twice separated by a space:
|
||||
|
||||
@@ -24,7 +24,7 @@ Using the <code>.match()</code> method on a string will return an array with the
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <code>capture groups</code> in <code>reRegex</code> to match numbers that are repeated only three times in a string, each separated by a space.
|
||||
Use capture groups in <code>reRegex</code> to match numbers that are repeated only three times in a string, each separated by a space.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@@ -7,7 +7,7 @@ forumTopicId: 301365
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can specify the lower and upper number of patterns with <code>quantity specifiers</code> using curly brackets. Sometimes you only want a specific number of matches.
|
||||
You can specify the lower and upper number of patterns with quantity specifiers using curly brackets. Sometimes you only want a specific number of matches.
|
||||
To specify a certain number of patterns, just have that one number between the curly brackets.
|
||||
For example, to match only the word <code>"hah"</code> with the letter <code>a</code> <code>3</code> times, your regex would be <code>/ha{3}h/</code>.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ forumTopicId: 301366
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can specify the lower and upper number of patterns with <code>quantity specifiers</code> using curly brackets. Sometimes you only want to specify the lower number of patterns with no upper limit.
|
||||
You can specify the lower and upper number of patterns with quantity specifiers using curly brackets. Sometimes you only want to specify the lower number of patterns with no upper limit.
|
||||
To only specify the lower number of patterns, keep the first number followed by a comma.
|
||||
For example, to match only the string <code>"hah"</code> with the letter <code>a</code> appearing at least <code>3</code> times, your regex would be <code>/ha{3,}h/</code>.
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ forumTopicId: 301367
|
||||
## Description
|
||||
<section id='description'>
|
||||
Recall that you use the plus sign <code>+</code> to look for one or more characters and the asterisk <code>*</code> to look for zero or more characters. These are convenient but sometimes you want to match a certain range of patterns.
|
||||
You can specify the lower and upper number of patterns with <code>quantity specifiers</code>. Quantity specifiers are used with curly brackets (<code>{</code> and <code>}</code>). You put two numbers between the curly brackets - for the lower and upper number of patterns.
|
||||
You can specify the lower and upper number of patterns with <dfn>quantity specifiers</dfn>. Quantity specifiers are used with curly brackets (<code>{</code> and <code>}</code>). You put two numbers between the curly brackets - for the lower and upper number of patterns.
|
||||
For example, to match only the letter <code>a</code> appearing between <code>3</code> and <code>5</code> times in the string <code>"ah"</code>, your regex would be <code>/a{3,5}h/</code>.
|
||||
|
||||
```js
|
||||
|
||||
Reference in New Issue
Block a user