fix: SearchModal crash on special character input (#335)

pmndrs · Sep 16, 2024 · bc2284c · bc2284c
1 parent ef06e36
commit bc2284c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/Search/SearchModalContainer.tsx b/src/components/Search/SearchModalContainer.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { useDocs } from '@/app/[...slug]/DocsContext'
 
 import cn from '@/lib/cn'
+import { escape } from '@/utils/text'
 import { Command } from 'cmdk'
 import { useRouter } from 'next/navigation'
 import { ComponentProps } from 'react'
@@ -27,7 +28,7 @@ export const SearchModalContainer = ({
 
       // Get length of matched text in result
       const relevanceOf = (result: SearchResult) =>
-        (result.title.toLowerCase().match(deferredQuery.toLowerCase())?.length ?? 0) /
+        (result.title.toLowerCase().match(escape(deferredQuery.toLowerCase()))?.length ?? 0) /
         result.title.length
 
       // Search

diff --git a/src/utils/text.ts b/src/utils/text.ts
@@ -8,5 +8,5 @@ export const escape = (text: string) => text.replace(/[|\\{}()[\]^$+*?.]/g, '\\$
  */
 export const highlight = (text: string, target: string) =>
   target.length > 0
-    ? text.replace(new RegExp(target, 'gi'), (match: string) => `<mark>${match}</mark>`)
+    ? text.replace(new RegExp(escape(target), 'gi'), (match: string) => `<mark>${match}</mark>`)
     : text