.github
api-server
client
config
curriculum
challenges
_meta
arabic
chinese
english
01-responsive-web-design
02-javascript-algorithms-and-data-structures
basic-algorithm-scripting
basic-data-structures
basic-javascript
debugging
es6
functional-programming
intermediate-algorithm-scripting
javascript-algorithms-and-data-structures-projects
object-oriented-programming
regular-expressions
check-for-all-or-none.english.md
check-for-mixed-grouping-of-characters.english.md
extract-matches.english.md
find-characters-with-lazy-matching.english.md
find-more-than-the-first-match.english.md
find-one-or-more-criminals-in-a-hunt.english.md
ignore-case-while-matching.english.md
match-a-literal-string-with-different-possibilities.english.md
match-all-letters-and-numbers.english.md
match-all-non-numbers.english.md
match-all-numbers.english.md
match-anything-with-wildcard-period.english.md
match-beginning-string-patterns.english.md
match-characters-that-occur-one-or-more-times.english.md
match-characters-that-occur-zero-or-more-times.english.md
match-ending-string-patterns.english.md
match-everything-but-letters-and-numbers.english.md
match-letters-of-the-alphabet.english.md
match-literal-strings.english.md
match-non-whitespace-characters.english.md
match-numbers-and-letters-of-the-alphabet.english.md
match-single-character-with-multiple-possibilities.english.md
match-single-characters-not-specified.english.md
match-whitespace.english.md
positive-and-negative-lookahead.english.md
remove-whitespace-from-start-and-end.english.md
restrict-possible-usernames.english.md
reuse-patterns-using-capture-groups.english.md
specify-exact-number-of-matches.english.md
specify-only-the-lower-number-of-matches.english.md
specify-upper-and-lower-number-of-matches.english.md
use-capture-groups-to-search-and-replace.english.md
using-the-test-method.english.md
03-front-end-libraries
04-data-visualization
05-apis-and-microservices
06-information-security-and-quality-assurance
08-coding-interview-prep
09-certificates
portuguese
russian
spanish
formattingConversion
math-challenges
requiresTests
schema
test
.babelrc
.editorconfig
.npmignore
.travis.yml
CHANGELOG.md
LICENSE.md
commitizen.config.js
commitlint.config.js
create-challenge-bundle.js
getChallenges.js
gulpfile.js
index.js
lib.js
md-translation.js
package-entry.js
package-lock.json
package.json
utils.js
docs
guide
search-indexing
tools
.editorconfig
.eslintignore
.eslintrc.json
.gitattributes
.gitignore
.gitpod.Dockerfile
.gitpod.yml
.node-inspectorrc
.prettierignore
.prettierrc
.snyk
.travis.yml
.vcmrc
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Dockerfile.tests
LICENSE.md
README.french.md
README.italian.md
README.korean.md
README.md
README.spanish.md
SECURITY.md
change_volumes_owner.sh
docker-compose-shared.yml
docker-compose.tests.yml
docker-compose.yml
lerna.json
libcimp_index_js.patch
package-lock.json
package.json
patch_npm_and_install.sh
sample.env
79 lines
2.1 KiB
Markdown
79 lines
2.1 KiB
Markdown
---
|
|
id: 587d7dbb367417b2b2512bab
|
|
title: Use Capture Groups to Search and Replace
|
|
challengeType: 1
|
|
forumTopicId: 301368
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
Searching is useful. However, you can make searching even more powerful when it also changes (or replaces) the text you match.
|
|
You can search and replace text in a string using <code>.replace()</code> on a string. The inputs for <code>.replace()</code> is first the regex pattern you want to search for. The second parameter is the string to replace the match or a function to do something.
|
|
|
|
```js
|
|
let wrongText = "The sky is silver.";
|
|
let silverRegex = /silver/;
|
|
wrongText.replace(silverRegex, "blue");
|
|
// Returns "The sky is blue."
|
|
```
|
|
|
|
You can also access capture groups in the replacement string with dollar signs (<code>$</code>).
|
|
|
|
```js
|
|
"Code Camp".replace(/(\w+)\s(\w+)/, '$2 $1');
|
|
// Returns "Camp Code"
|
|
```
|
|
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
Write a regex so that it will search for the string <code>"good"</code>. Then update the <code>replaceText</code> variable to replace <code>"good"</code> with <code>"okey-dokey"</code>.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: You should use <code>.replace()</code> to search and replace.
|
|
testString: assert(code.match(/\.replace\(.*\)/));
|
|
- text: Your regex should change <code>"This sandwich is good."</code> to <code>"This sandwich is okey-dokey."</code>
|
|
testString: assert(result == "This sandwich is okey-dokey." && replaceText === "okey-dokey");
|
|
- text: You should not change the last line.
|
|
testString: assert(code.match(/result\s*=\s*huhText\.replace\(.*?\)/));
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='js-seed'>
|
|
|
|
```js
|
|
let huhText = "This sandwich is good.";
|
|
let fixRegex = /change/; // Change this line
|
|
let replaceText = ""; // Change this line
|
|
let result = huhText.replace(fixRegex, replaceText);
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
let huhText = "This sandwich is good.";
|
|
let fixRegex = /good/g; // Change this line
|
|
let replaceText = "okey-dokey"; // Change this line
|
|
let result = huhText.replace(fixRegex, replaceText);
|
|
```
|
|
|
|
</section>
|