lesson6.html

<html>
<head>
  <meta charset="utf-8">
  <meta name="application-name" content="KITAB regex tutorial">
  <meta name="created" content="2021-05-05">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>KITAB regex tutorial - lesson 6: Whitespace</title>
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
  <!--<script src="https://unpkg.com/xregexp/xregexp-all.js"></script>--> <!--regular expressions library with support for unicode code blocks-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xregexp/3.2.0/xregexp-all.min.js"></script>
</head>
<body>
  <h1>Regex tutorial for humanists</h1>
  <div id="tutorial">
    <h2>6. Whitespace</h2>
    <p>
      Whitespace is a special category of characters, and a number of
      symbols denote specific types of whitespace in regular expressions:
    </p>
    <ul>
      <li>
        <span class="regex">\t</span> : the (horizontal) <a href="https://en.wikipedia.org/wiki/Tab_key">tab</a> character
      </li>
      <li>
        <span class="regex">\n</span> : the <a href="https://en.wikipedia.org/wiki/Newline">newline (aka "linefeed")</a> character
      </li>
      <li>
        <span class="regex">\r</span> : the <a href="https://en.wikipedia.org/wiki/Carriage_return">carriage return</a> character
        (in Windows, new lines are indicated by a combination of carriage return +
        newline characters: "\r\n"; on Mac and Linux,
        only the newline character "\n" is used to indicate new lines in a text).
        This character is a leftover from the typewriter age, in which the "carriage"
        that held the paper was first returned to its initial position
        and then the paper was shifted upwards; the result was that the machine
        could start to write on a new line.
      </li>

      <li>
        <span class="regex">\s</span> : any type of horizontal or vertical whitespace
        (space, tab, newline, carriage return, vertical tab)
      </li>
      <li>
        <span class="regex">\S</span> (capital S): any character that is not a
        whitespace character (that is, the opposite of <span class="regex">\s</span>,
        like <span class="regex">\D</span> means the opposite of
        <span class="regex">\d</span>, see <a href="lesson4.html">lesson 4</a>)
      </li>
    </ul>
    <p>
      In the search box below the sample strings, write a pattern that matches
      any string that consists of two three-letter words separated by any type of whitespace.
    </p>
  </div>
  <div id="exercise" type="full_match">  <!-- possible types: full_match, partial_match -->
    <div id="exercise_title">
      Exercise 6: any string that consists of two three-letter words separated by any type of whitespace.
    </div>
    <div id="samples">
      <table>
        <thead>
          <tr>
            <th>Task</th>
            <th>Text</th>
            <th>&nbsp;</th>
          </tr>
          <!-- line below the table heading: -->
          <tr><td style="border-top:1px solid black;" colspan="3"></td></tr>
        </thead>
        <tbody>
          <tr>
            <td class="instruction">Match this string entirely</td>
            <td class="sample" match="hey you">hey you</td>
            <td class="correctOrNot"></td>
          </tr>
          <tr>
            <td class="instruction">Don't match this string</td>
            <td class="sample" match="not_you">not_you</td>
            <td class="correctOrNot"></td>
          </tr>
          <tr>
            <td class="instruction">Match this string entirely</td>
            <td class="sample" match="yes\nyou">yes<br>you</td>
            <td class="correctOrNot"></td>
          </tr>
          <tr>
            <td class="instruction">Match this string entirely</td>
            <td class="sample" match="tab\tkey"><pre>tab	key</pre></td>
            <td class="correctOrNot"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="input">
      <input id="solution_input" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="Type your regex pattern" solution="\w\w\w\s\w\w\w"></input>
      <input id="next_button" type="button" onclick="location.href='lesson7.html';" value="Next lesson" disabled title="Get the solution first!"/>
    </div>
    <div id="hintOrSolution">
      <input id="hint_button" type="button" onclick="showHint()" value="Hint" title="Get a hint"/>
      <input id="solution_button" type="button" onclick="showSolution()" value="Solution" title="Take the hint before you get the solution!" disabled/>

    </div>
    <div id="hint" style="display:none;">
      Each of the sample strings consists of 7 characters: three letters followed by a 
      whitespace character (except in the sample that we should not match), followed by three more letters.
      Use a sequence of the <span class="regex">\w</span> and <span class="regex">\s</span> patterns
      to build your pattern.
    </div>
    <div id="solution" style="display:none;">
      The pattern consists of three times the symbol for letter (<span class="regex">\w</span>),
      followed by the symbol for any whitespace character (<span class="regex">\s</span>),
      followed by three more times the symbol for letter (<span class="regex">\w</span>)
    </div>
  </div>
  <input id="back_button" type="button" onclick="location.href='lesson5.html';" value="Back"/>
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>