fix: enforce full line to match when reference regex has the form ^...$

_data/localization.json

@@ -89,7 +89,12 @@
       "de": "✓ gefunden",
       "sv": "✓ matchade",
       "pt-br": "✓ corresponde"
-
+    },
+    "matchedIncompletely": {
+      "en": "(✓) matched, but whole line should match",
+      "de": "(✓) gefunden, aber die ganze Zeile soll passen",
+      "sv": "(✓) matchade, men hela raden ska matcha",
+      "pt-br": "(✓) corresponde, mas toda a linha deve corresponder"
     },
     "shouldNotMatch": {
       "en": "✓ matched, but should not match",

_layouts/tutorial.html

@@ -35,6 +35,10 @@
       content: "{{ site.data.localization.hint.hidden[page.lang] }}";
     }
 
+    .playfield.verbose .incompletematch.ok:after {
+      content: "{{ site.data.localization.match.matchedIncompletely[page.lang] }}";
+    }
+
     .playfield.verbose .match.ok:after {
       content: "{{ site.data.localization.match.matched[page.lang] }}";
     }

css/playfield.css

@@ -51,6 +51,9 @@
 
 .playfield  .nomatch {
 }
+.playfield  .incompletematch.ok {
+  background-color: {{ site.data.colors.fails }};
+}
 .playfield  .nomatch.ok {
   background-color: {{ site.data.colors.fails }};
 }

de/05-02.html

@@ -5,8 +5,8 @@
   Der nächste Ausdruck soll die Zahlen 20 bis 29 finden aber er tut es nicht.
   Magst du ihn ändern, dass er nur die Zahlen zwischen 20 und 29 erkennt?
 </p>
-<div class="playfield">
-  <input type="text" value="[20-29]" class="regex" reference="2[0-9]">
+<div class="playfield verbose">
+  <input type="text" value="[20-29]" class="regex" reference="^2[0-9]$">
   <div class="message"></div>
   <ul class="examples">
     <li>12</li>

en/05-02.html

@@ -5,8 +5,8 @@
   The following expression shall find the numbers 20 to 29 but it has mistakes.
   Would you like to change it so it matches only the number from 20 to 29?
 </p>
-<div class="playfield">
-  <input type="text" value="[20-29]" class="regex" reference="2[0-9]">
+<div class="playfield verbose">
+  <input type="text" value="[20-29]" class="regex" reference="^2[0-9]$">
   <div class="message"></div>
   <ul class="examples">
     <li>12</li>

js/playfield.js

@@ -22,7 +22,7 @@ function nomatchTextElement(string) {
   return span;
 }
 
-function matchExample(match, example) {
+function matchExample(match, isIncomplete, text, example) {
   var text = example.innerText;
   var start = match.index;
   var stop = match.index + match[0].length;
@@ -34,14 +34,23 @@ function matchExample(match, example) {
   example.appendChild(nomatchTextElement(textBefore));
   example.appendChild(matchTextElement(textMatch));
   example.appendChild(nomatchTextElement(textAfter));
-  example.classList.add("match");
+
+  if (!isIncomplete) {
+    example.classList.remove("incompletematch");
+    example.classList.add("match");
+  } else {
+    example.classList.remove("match");
+    example.classList.add("incompletematch");
+  }
+
   example.classList.remove("nomatch");
 }
 
 function unmatchExample(example) {
   var text = example.innerText;
   example.innerHTML = "";
   example.appendChild(nomatchTextElement(text));
+  example.classList.remove("incompletematch");
   example.classList.remove("match");
   example.classList.add("nomatch");
 }
@@ -57,10 +66,13 @@ function watchExpression(playfield, examples, regex, message) {
       return null;
     }
   }
-  function getReferenceRegex() {
+  function getReferenceInfo() {
     var reference = regex.getAttribute("reference");
     try {
-      return RegExp(reference);
+      return {
+        "shouldMatchWholeLine": reference.startsWith('^') && reference.endsWith('$'),
+        "regex": RegExp(reference)
+      };
     } catch (err) {
       message.innerHTML = translateReferenceWrongErrorMessage(err.message);
       return null;
@@ -69,9 +81,9 @@ function watchExpression(playfield, examples, regex, message) {
   function check() {
     updateExperiment();
     playfield.classList.remove("success");
-    var reference = getReferenceRegex();
+    var referenceInfo = getReferenceInfo();
     var exp = getExpression();
-    if (!exp || !reference) {
+    if (!exp || !referenceInfo) {
       return;
     }
     message.innerHTML = "";
@@ -83,7 +95,13 @@ function watchExpression(playfield, examples, regex, message) {
       var example = example_list[i];
       var text = example.innerText;
       // determine if it should match
-      var shouldNotMatch = reference.exec(text) ? false : true;
+      var shouldNotMatch;
+      if (!referenceInfo.shouldMatchWholeLine) {
+        shouldNotMatch = referenceInfo.regex.exec(text) ? false : true;
+      } else {
+        var matches = text.match(referenceInfo.regex);
+        shouldNotMatch =  matches?.length > 0 && matches[0] == text ? false : true;
+      }
       if (shouldNotMatch) {
         example.classList.add("fail");
         example.classList.remove("ok");
@@ -94,7 +112,15 @@ function watchExpression(playfield, examples, regex, message) {
       // check the match
       var match = exp.exec(text);
       if (match) {
-        matchExample(match, example);
+        var matches = text.match(exp);
+        var isIncomplete =
+          referenceInfo.shouldMatchWholeLine
+          && matches?.length > 0 && matches[0] != text;
+
+        matchExample(match, isIncomplete, text, example);
+
+        // enforce overall result to fail if any match is incomplete
+        match = !isIncomplete;
       } else {
         unmatchExample(example);
       }
@@ -130,7 +156,7 @@ function watchExpression(playfield, examples, regex, message) {
       var match = exp.exec(text);
       if (match) {
         experiment.classList.add("match");
-        matchExample(match, content);
+        matchExample(match, false, text, content);
       } else {
         experiment.classList.add("nomatch");
         unmatchExample(content);