fix: improve regex escaping in useNinjaMark function

Author: stafyniaksacha

.playground/pages/tests/form/autocomplete.vue

@@ -84,7 +84,7 @@ const hobbies: Hobby[] = [
   },
   {
     id: 5,
-    name: 'Karaoke',
+    name: 'Karaoke (with friends)',
     text: 'singing with friends',
     icon: 'ph:microphone-stage-duotone',
   },

composables/mark.ts

@@ -2,6 +2,10 @@ import type { MaybeRefOrGetter } from 'vue'
 
 import { escapeHtml } from '@vue/shared'
 
+function escapeRegExp(literal: string): string {
+  return literal.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
 export function useNinjaMark(
   _text?: MaybeRefOrGetter<string | undefined>,
   _search?: MaybeRefOrGetter<string | undefined>,
@@ -22,7 +26,7 @@ export function useNinjaMark(
       return escapeHtml(txt)
     }
 
-    const regex = new RegExp(srch, 'gi')
+    const regex = new RegExp(escapeRegExp(srch), 'gi')
 
     return txt.replace(regex, (part) => {
       return `<mark class="${classes.value}">${escapeHtml(part)}</mark>`