feat: add regex support to search functionality

- Update search placeholder to indicate regex support
- Modify search functions to use regex patterns directly
- Add error handling for invalid regex patterns
- Fall back to literal string search when regex is invalid

Author: Raffael Herrmann

public/index.html

@@ -33,7 +33,7 @@ <h1 class="text-2xl font-bold">massCode-Web</h1>
                 🌓
             </button>
             <div class="relative">
-                <input type="text" id="search" placeholder="Search snippets..." class="w-64 px-3 py-2 pr-8 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 transition-colors">
+                <input type="text" id="search" placeholder="Search snippets (regex supported)..." class="w-64 px-3 py-2 pr-8 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 transition-colors">
                 <button id="clear-search" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" onclick="clearSearch()" style="display: none;">×</button>
             </div>
         </div>

public/js/app.js

@@ -222,11 +222,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 let activeTabIndex = 0;
 
                 // Check name
-                if (snippet.name.toLowerCase().includes(query)) {
+                if (matchesQuery(snippet.name, query)) {
                     hasMatch = true;
                 }
                 // Check description
-                if (snippet.description?.toLowerCase().includes(query)) {
+                if (snippet.description && matchesQuery(snippet.description, query)) {
                     hasMatch = true;
                 }
 
@@ -295,14 +295,32 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    // Function to check if text matches query (supports regex)
+    function matchesQuery(text, query) {
+        if (!query.trim()) return false;
+        try {
+            const regex = new RegExp(query, 'i'); // case-insensitive
+            return regex.test(text);
+        } catch (error) {
+            // If regex is invalid, fall back to literal string search
+            return text.toLowerCase().includes(query.toLowerCase());
+        }
+    }
+
     // Function to highlight search matches in text
     function highlightSearchMatches(text, query) {
         if (!query.trim()) return text;
 
-        // Escape special regex characters in query
-        const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        const regex = new RegExp(`(${escapedQuery})`, 'gi');
-        return text.replace(regex, '<mark class="search-highlight">$1</mark>');
+        try {
+            // Try to use the query as a regex pattern
+            const regex = new RegExp(`(${query})`, 'gi');
+            return text.replace(regex, '<mark class="search-highlight">$1</mark>');
+        } catch (error) {
+            // If regex is invalid, escape special characters and search as literal string
+            const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const regex = new RegExp(`(${escapedQuery})`, 'gi');
+            return text.replace(regex, '<mark class="search-highlight">$1</mark>');
+        }
     }
 
     function renderSnippets(snippets, clear = false) {