JSFiddle - React, Tailwind, and code Playground

by greggpollack

HTML

<!DOCTYPE html>
<body>

<h1>Breaking the Ice With Regular Expressions</h1>
<h2>Level 1 :: Section 1</h2>

<p>In this first section, we'll figure out how to hunt down some British spellings of words in an introductory research paper about a Polar Ocean Program written by the British Antarctic Survey. Our goal will be to convert those British spellings to Americanized spellings so that WE can use them in a re-post of the program's information on our Polar Exploration website in the U.S. Here's just a sample of this paper, which we'll imagine is stored for us in its entirety within a variable called `polarOceans`.</p>

<h3 style="color:#3333CC; font-family:sans-serif">**********************
    <br> Polar Oceans Programme Summary</h3>
<p style="color:#3333CC; font-family:sans-serif">
    <i>Table of Contents</i><br>
    <ul style="color:#3333CC; font-family:sans-serif"><li>Introduction »</li>
        <li>BAS Research »</li>
        <li>Our Research Programmes »</li> 
        <li>Current Research »</li>
        <li>Polar Science for Planet Earth Programmes »</li> 
        <li>Polar Oceans »</li></ul></p>
<p style="color:#3333CC; font-family:sans-serif"><i>Introduction</i>
    <br><br>
The Polar Oceans programme investigates the role of processes and changes both in the shelf sea and in open-ocean environments, and will further our understanding of polar control of the Earth System.
        Programmed goals are (1) to explain the processes that drive and close the overturning circulation in the Southern Ocean, (2) to determine the impact of, and the feedback between, the ocean and ice shelves, (3) to understand the physical drivers of change in the marine environment, and the likely implications for climate, (4) to determine the impacts that changes in the polar regions have on the Earth System via ocean circulation, and (5) to measure and understand the changes in properties in key water masses of polar origin.</p><p style="color:#3333CC;...

JavaScript

//Level 1 
//Section 1
//Character Literals, Case, and Global Results

//Problem: Converting British English spellings within an article to American English spellings for publication in the US.

var polarOceans = "<h3 style=\"color:#3333CC; font-family:sans-serif\">**********************<br> Polar Oceans Programme Summary</h3><p style=\"color:#3333CC; font-family:sans-serif\"><i>Table of Contents</i><br><ul style=\"color:#3333CC; font-family:sans-serif\"<li>Introduction »</li><li>BAS Research »</li><li>Our Research Programmes »</li><li>Current Research »</li><li>Polar Science for Planet Earth Programmes »</li><li>Polar Oceans »</li></ul></p><p style=\"color:#3333CC; font-family:sans-serif\"><i>Introduction</i><br><br>The Polar Oceans programme investigates the role of processes and changes both in the shelf sea and in open-ocean environments, and will further our understanding of polar control of the Earth System. Programmed goals are (1) to explain the processes that drive and close the overturning circulation in the Southern Ocean, (2) to determine the impact of, and the feedback between, the ocean and ice shelves, (3) to understand the physical drivers of change in the marine environment, and the likely implications for climate, (4) to determine the impacts that changes in the polar regions have on the Earth System via ocean circulation, and (5) to measure and understand the changes in properties in key water masses of polar origin. The programme's mission is to advance knowledge of the contribution of polar oceans to global ocean circulation.</p><p style=\"color:#3333CC; font-family:sans-serif\"><i>...continues...</i></p><h3 style=\"color:#3333CC; font-family:sans-serif\">**********************</h3>";

var results = "";

//Concept 1 - Match a pattern, not a string.
//Note: Skips capitalized P's.
var regEx = /programme/;
document.getElementById("1").innerHTML = "Concept 1:<br>Match(es) found: " + polarOceans.match(regEx);

//Concept 2 - To get a match, pattern...