refactor: implement buildSmartRegExp utility and optimize regex usage in components

Author: Ayideyia

frontend/src/stores/subscribes.ts

@@ -16,6 +16,7 @@ import {
   stringifyNoFolding,
   asyncPool,
   eventBus,
+  buildSmartRegExp,
 } from '@/utils'
 
 import type { Subscription } from '@/types/app'
@@ -142,12 +143,17 @@ export const useSubscribesStore = defineStore('subscribes', () => {
     }
 
     if (s.type !== 'Manual') {
+      const r1 = s.include && buildSmartRegExp(s.include)
+      const r2 = s.exclude && buildSmartRegExp(s.exclude)
+      const r3 = s.includeProtocol && buildSmartRegExp(s.includeProtocol)
+      const r4 = s.excludeProtocol && buildSmartRegExp(s.excludeProtocol)
+
       proxies = proxies.filter((v) => {
-        const flag1 = s.include ? new RegExp(s.include, 'i').test(v.name) : true
-        const flag2 = s.exclude ? !new RegExp(s.exclude, 'i').test(v.name) : true
-        const flag3 = s.includeProtocol ? new RegExp(s.includeProtocol, 'i').test(v.type) : true
-        const flag4 = s.excludeProtocol ? !new RegExp(s.excludeProtocol, 'i').test(v.type) : true
-        return flag1 && flag2 && flag3 && flag4
+        const flag1 = r1 ? r1.test(v.name) : true
+        const flag2 = r2 ? r2.test(v.name) : false
+        const flag3 = r3 ? r3.test(v.type) : true
+        const flag4 = r4 ? r4.test(v.type) : false
+        return flag1 && !flag2 && flag3 && !flag4
       })
 
       if (s.proxyPrefix) {

frontend/src/utils/others.ts

@@ -285,3 +285,21 @@ export const stringifyNoFolding = (content: any) => {
   // Disable string folding
   return stringify(content, { lineWidth: 0, minContentWidth: 0 })
 }
+
+const regexCache = new Map()
+
+export const buildSmartRegExp = (pattern: string, flags = '') => {
+  const key = pattern + '::' + flags
+  if (regexCache.has(key)) return regexCache.get(key)
+
+  let r
+  try {
+    r = new RegExp(pattern, flags)
+  } catch {
+    const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    r = new RegExp(escaped, flags)
+  }
+
+  regexCache.set(key, r)
+  return r
+}

frontend/src/views/HomeView/components/GroupsController.vue

@@ -15,7 +15,14 @@ import { ControllerCloseMode } from '@/enums/app'
 import { ProxyGroupType } from '@/enums/kernel'
 import { useBool } from '@/hooks'
 import { useAppSettingsStore, useKernelApiStore } from '@/stores'
-import { ignoredError, sleep, handleUseProxy, message, createAsyncPool } from '@/utils'
+import {
+  ignoredError,
+  sleep,
+  handleUseProxy,
+  message,
+  createAsyncPool,
+  buildSmartRegExp,
+} from '@/utils'
 
 const expandedSet = ref<Set<string>>(new Set())
 const loadingSet = ref<Set<string>>(new Set())
@@ -56,12 +63,7 @@ const groups = computed(() => {
             proxies[proxy]?.all ||
             proxies[proxy]?.alive
           const keywords = filterKeywordsMap.value[group.name]
-          let condition2 = false
-          try {
-            condition2 = keywords ? new RegExp(keywords, 'i').test(proxy) : true
-          } catch {
-            condition2 = keywords ? proxy.includes(keywords) : true
-          }
+          const condition2 = keywords ? buildSmartRegExp(keywords, 'i').test(proxy) : true
           return condition1 && condition2
         })
         .map((proxy) => {

frontend/src/views/HomeView/components/LogsController.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { LogLevelOptions } from '@/constant'
 import { useBool } from '@/hooks'
 import { useKernelApiStore } from '@/stores'
-import { isValidIPv4, isValidIPv6, addToRuleSet, message, picker } from '@/utils'
+import { isValidIPv4, isValidIPv6, addToRuleSet, message, picker, buildSmartRegExp } from '@/utils'
 
 import { type PickerItem } from '@/components/Picker/index.vue'
 
@@ -14,7 +14,6 @@ import type { Menu } from '@/types/app'
 const logType = ref<'error' | 'warning' | 'info' | 'debug'>('info')
 const keywords = ref('')
 const logs = ref<{ type: string; payload: string }[]>([])
-const keywordsRegexp = computed(() => new RegExp(keywords.value))
 
 const LogLevelMap = {
   silent: ['silent'],
@@ -27,7 +26,7 @@ const LogLevelMap = {
 const filteredLogs = computed(() => {
   return logs.value.filter((v) => {
     const hitType = LogLevelMap[logType.value].includes(v.type)
-    const hitName = keywordsRegexp.value.test(v.payload)
+    const hitName = buildSmartRegExp(keywords.value, 'i').test(v.payload)
     return hitName && hitType
   })
 })

frontend/src/views/SubscribesView/components/ProxiesView.vue

@@ -7,7 +7,14 @@ import { ClipboardSetText, ReadFile, WriteFile } from '@/bridge'
 import { DraggableOptions } from '@/constant'
 import { useBool } from '@/hooks'
 import { useSubscribesStore } from '@/stores'
-import { deepClone, ignoredError, sampleID, stringifyNoFolding, message } from '@/utils'
+import {
+  deepClone,
+  ignoredError,
+  sampleID,
+  stringifyNoFolding,
+  message,
+  buildSmartRegExp,
+} from '@/utils'
 
 import Button from '@/components/Button/index.vue'
 
@@ -30,14 +37,6 @@ const sub = ref(deepClone(props.sub))
 
 const [showDetails, toggleDetails] = useBool(false)
 
-const keywordsRegexp = computed(() => {
-  try {
-    return new RegExp(keywords.value, 'i')
-  } catch {
-    return keywords.value
-  }
-})
-
 const filteredProxyTypeOptions = computed(() => {
   const proxyProtocols = sub.value.proxies.reduce((p, c) => {
     p[c.type] = (p[c.type] || 0) + 1
@@ -55,12 +54,7 @@ const filteredProxyTypeOptions = computed(() => {
 const filteredProxies = computed(() => {
   return sub.value.proxies.filter((v) => {
     const hitType = proxyType.value ? proxyType.value === v.type : true
-    let hitName = true
-    if (typeof keywordsRegexp.value === 'string') {
-      hitName = v.name.toLowerCase().includes(keywordsRegexp.value.toLowerCase())
-    } else {
-      hitName = keywordsRegexp.value.test(v.name)
-    }
+    const hitName = buildSmartRegExp(keywords.value, 'i').test(v.name)
     return hitName && hitType
   })
 })