- update test text in regex tester with more diverse pattern examples

- replace string concatenation with character-by-character marking system for highlighting
- fix potential issues with overlapping matches in highlighting
- add proper tracking of match start/end positions
- ensure HTML escaping is applied correctly
- refactor match display code for better readability

Author: TobiasMue91

tools/regex_tester.html

@@ -605,13 +605,27 @@ <h2 class="card-title">Regular Expression</h2>
 
       <div class="form-group">
         <label class="form-label" for="test-text">Test Text</label>
-        <textarea id="test-text" class="form-input" placeholder="Enter text to test against the regular expression..." aria-label="Test text">As a resident of the UK, I often find myself perusing the internet for information on different countries. Whether it's the US with its vibrant cities, Australia with its stunning beaches, or other countries around the world, I'm always looking to learn more. One thing I've noticed is that when searching for information, I encounter a lot of different formats, from email addresses and phone numbers to postal codes and credit card numbers.
+        <textarea id="test-text" class="form-input" placeholder="Enter text to test against the regular expression..." aria-label="Test text">RegEx Lab User Guide - April 13, 2025
 
-For example, let's say you want to reach out to someone via email. Using a regular expression, you can match any email address, including extended formats like [email protected]. Similarly, if you're looking for a specific vehicle registered in the UK, you can use a regular expression to match the format of the UK vehicle registration numbers. You can even match phone numbers, whether they're from the US, Australia, or the UK.
+Contact Information:
+John Smith (Customer ID: ABC123) from Sydney, Australia can be reached at [email protected] or via his alternate email address [email protected]. His US office phone is 555-123-4567, while his direct line is 5551234567. UK colleagues can reach him at 07700900123.
 
-But regular expressions aren't just limited to matching contact information. You can use them to match a wide range of patterns, like IP addresses, URLs, and even dates in the format YYYY-MM-DD. You can even match times in the format HH:MM, and prices with a decimal point (e.g. 10.99).
+Technical Details:
+The company website is https://www.regex-lab.com with a backup server at http://backup.regex-lab.com/admin. The main server has IP address 192.168.1.1, with additional servers at 10.0.0.1 and 172.16.0.100.
 
-So whether you're trying to match credit card numbers, social security numbers, or even full names, using regular expressions can help you do it quickly and efficiently.</textarea>
+Shipping Information:
+US customers: Please allow 3-5 business days for delivery to zip codes like 90210 or extended codes such as 90210-1234.
+Australian customers: Items shipped to postcodes 2000 (Sydney) or 3000 (Melbourne) arrive within 2 business days.
+UK customers: For vehicle deliveries, please provide your registration number (format like AB1234CD) for verification.
+
+Important Dates and Times:
+The company was established on 2015-01-15. Our office hours are 09:00 to 17:30 Monday-Friday.
+Our quarterly planning meetings happen at 14:00 on 2025-05-20, 2025-08-15, and 2025-11-10.
+Prices range from $10.99 to $2,499.99 depending on configuration.
+
+Security Notice:
+Never share your Social Security Number (e.g., 123-45-6789) or password (like Password123) with anyone.
+Customer support will never ask for your full credit card number (e.g., 4111111111111111).</textarea>
       </div>
 
       <div class="form-group">
@@ -963,56 +977,82 @@ <h3 class="mb-2">Pattern Explanation</h3>
     // Update stats
     resultStats.textContent = `Found ${matches.length} match${matches.length !== 1 ? 'es' : ''} in ${executionTime}ms`;
 
-    // Highlight matches in text
-    let highlightedText = escapeHTML(text);
-    let lastIndex = 0;
-    let result = '';
+    // Create a "marked" array to track which characters are part of matches
+    // Each position will contain null or an object with match info
+    const marked = new Array(text.length).fill(null);
+
+    // Mark all matches in our tracking array
+    matches.forEach((match, matchIndex) => {
+      for (let i = 0; i < match.value.length; i++) {
+        const pos = match.index + i;
+        if (pos < text.length) {
+          marked[pos] = {
+            matchIndex: matchIndex,
+            isStart: i === 0,
+            isEnd: i === match.value.length - 1
+          };
+        }
+      }
+    });
 
-    // Sort matches by index to ensure correct order
-    matches.sort((a, b) => a.index - b.index);
+    // Build the HTML by going through the text character by character
+    let html = '';
+    let currentlyInMatch = false;
 
-    for (const match of matches) {
-      // Add text before the match
-      result += highlightedText.substring(lastIndex, match.index);
+    for (let i = 0; i < text.length; i++) {
+      const char = text[i];
+      const mark = marked[i];
 
-      // Add the highlighted match
-      const escapedMatch = escapeHTML(match.value);
-      if (match.groups.length > 0) {
-        // If we have capture groups, highlight them differently
-        result += `<span class="highlight-match">${escapedMatch}</span>`;
-      } else {
-        result += `<span class="highlight-match">${escapedMatch}</span>`;
+      // Handle opening a new match span
+      if (mark && mark.isStart) {
+        html += '<span class="highlight-match">';
+        currentlyInMatch = true;
       }
 
-      lastIndex = match.index + match.value.length;
+      // Add the character (with HTML escaping)
+      html += escapeHTML(char);
+
+      // Handle closing a match span
+      if (mark && mark.isEnd && currentlyInMatch) {
+        html += '</span>';
+        currentlyInMatch = false;
+      }
+    }
+
+    // Ensure we close any open spans (safeguard)
+    if (currentlyInMatch) {
+      html += '</span>';
     }
 
-    // Add remaining text
-    result += highlightedText.substring(lastIndex);
-    resultContent.innerHTML = result;
+    // Set the result
+    resultContent.innerHTML = html;
 
     // Display matches detail
     if (matches.length > 0) {
       matchesList.innerHTML = '';
+
+      // Sort matches by index for display
+      matches.sort((a, b) => a.index - b.index);
+
       matches.forEach((match, index) => {
         const matchItem = document.createElement('div');
         matchItem.className = 'match-item';
 
         let matchHTML = `
-            <div class="match-index">Match ${index + 1} (index: ${match.index})</div>
-            <div class="match-value">${escapeHTML(match.value)}</div>
-          `;
+        <div class="match-index">Match ${index + 1} (index: ${match.index})</div>
+        <div class="match-value">${escapeHTML(match.value)}</div>
+      `;
 
         if (match.groups.length > 0) {
           matchHTML += '<div class="match-groups">';
           match.groups.forEach((group, groupIndex) => {
             if (group !== undefined) {
               matchHTML += `
-                  <div class="group-item">
-                    <div class="group-number">${groupIndex + 1}</div>
-                    <div class="group-value">${escapeHTML(group)}</div>
-                  </div>
-                `;
+              <div class="group-item">
+                <div class="group-number">${groupIndex + 1}</div>
+                <div class="group-value">${escapeHTML(group)}</div>
+              </div>
+            `;
             }
           });
           matchHTML += '</div>';