perf(search): use dom apis instead of regex-based section parsing (#2486

)
vuejs · Jun 7, 2023 · d62e6f6 · d62e6f6
1 parent c995b9f
commit d62e6f6
Showing 1 changed file with 12 additions and 13 deletions.
diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -119,8 +119,6 @@ watchEffect(() => {
 
 const results: Ref<(SearchResult & Result)[]> = shallowRef([])
 
-const headingRegex = /<h(\d*).*?>.*?<a.*? href="#(.*?)".*?>.*?<\/a><\/h\1>/gi
-
 const enableNoResults = ref(false)
 
 watch(filterText, () => {
@@ -158,10 +156,8 @@ debouncedWatch(
       const mapId = id.slice(0, id.indexOf('#'))
       let map = c.get(mapId)
       if (map) continue
-      else {
-        map = new Map()
-        c.set(mapId, map)
-      }
+      map = new Map()
+      c.set(mapId, map)
       const comp = mod.default ?? mod
       if (comp?.render) {
         const app = createApp(comp)
@@ -182,14 +178,17 @@ debouncedWatch(
         })
         const div = document.createElement('div')
         app.mount(div)
-        const sections = div.innerHTML.split(headingRegex)
+        const headings = div.querySelectorAll('h1, h2, h3, h4, h5, h6')
+        headings.forEach((el) => {
+          const href = el.querySelector('a')?.getAttribute('href')
+          const anchor = href?.startsWith('#') && href.slice(1)
+          if (!anchor) return
+          let html = ''
+          while ((el = el.nextElementSibling!) && !/^h[1-6]$/i.test(el.tagName))
+            html += el.outerHTML
+          map!.set(anchor, html)
+        })
         app.unmount()
-        sections.shift()
-        for (let i = 0; i < sections.length; i += 3) {
-          const anchor = sections[i + 1]
-          const html = sections[i + 2]
-          map.set(anchor, html)
-        }
       }
       if (canceled) return
     }